fix: node+browser compatible ES module import paths (#378)

The packages that export ES modules do not have a `.js` extension on the
import paths, which means that the import path does not match an actual
file path (since the latter do have a `.js` extension). This means they
cannot be properly resolved by Node.js or the browser.

However, since we're using TypeScript to transpile, and we're using the
legacy "node" module resolution, the import paths are preserved and end
up not having a `.js` extension, while the transpiled files to have it.

There are two main ways to deal with this:

1. Use TS configuration `{"module":"esnext","moduleResolution":"bundler"}`
   and use a bundler that produces import paths matching an actual file.
   Note: using TypeScript in this case would leave the imports as-is
   and require users to use a bundler, so it would not constitute an
   ES module that just works with node/browser, which is the problem we
   actually set out to solve.
2. Use TS configuration `{"module":"nodenext","moduleResolution":"nodenext"}`
   and use `{"type":"module"}` in package.json. This will instruct tsc to
   produce output that matches the package configuration, so ES module in
   this case.

The advantage with (1) is that it requires no addition of a `.js`
extension to the imports in the .ts(x) source files. Unfortunately this
requires TS 5 (we currently use TS 4) _and_ the use of a bundler to
build (which we currently do not use). The advantage with (2) is that it
requires no changes to how we build, but it does required adding a `.js`
extension to all import paths in the source code.

Since addition of a bundler adds a layer of complexity in maintenance
for a repository that should be easily accessible, it seems option (2) is
preferable (and also can be done without having to do a major TS ugprade
first).

components/empty-view/.eslintrc.json

@@ -3,6 +3,6 @@
   "root": true,
   "ignorePatterns": ["lib", "**/*.js"],
   "parserOptions": {
-    "project": ["./tsconfig.src.json"]
+    "project": ["./tsconfig.json"]
   }
 }

components/empty-view/package.json

@@ -10,16 +10,17 @@
   },
   "license": "MIT",
   "author": "Axis Communications AB",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "files": [
-    "lib"
-  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
+    }
+  },
+  "files": ["lib"],
   "scripts": {
     "prebuild": "pnpm run -C ../../illustrations build",
-    "build": "pnpm prebuild && pnpm build:cjs && pnpm build:esm",
-    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
-    "build:esm": "tsc",
+    "build": "pnpm prebuild && tsc",
     "check:unused-deps": "depcheck . --config=depcheck.yml",
     "lint": "tsc --noEmit && eslint . --cache"
   },

components/empty-view/src/constants.ts

@@ -43,7 +43,7 @@ import {
   UnderConstructionDark,
   UnderConstructionLight,
 } from "@axiscommunications/fluent-illustrations";
-import { IllustrationKind } from "./types";
+import { IllustrationKind } from "./types.js";
 
 export const Illustration: Record<
   IllustrationKind,

components/empty-view/src/index.ts

@@ -3,4 +3,4 @@ export {
   MainEmptyView,
   PanelEmptyView,
   SubmenuEmptyView,
-} from "./view";
+} from "./view.js";

components/empty-view/src/styles.ts

@@ -4,7 +4,7 @@ import {
   shorthands,
   tokens,
 } from "@fluentui/react-components";
-import { HtmlDivAttributesRestProps } from "./types";
+import { HtmlDivAttributesRestProps } from "./types.js";
 
 export const useStyles = makeStyles({
   container: {

components/empty-view/src/view.tsx

@@ -11,13 +11,13 @@ import {
 
 import { useMediaQuery } from "@axiscommunications/fluent-hooks";
 
-import { useContainerStyle, useStyles } from "./styles";
+import { useContainerStyle, useStyles } from "./styles.js";
 import {
   ContentProps,
   EmptyViewProps,
   HtmlDivAttributesRestProps,
-} from "./types";
-import { Illustration } from "./constants";
+} from "./types.js";
+import { Illustration } from "./constants.js";
 
 function ContainerSpacious(
   { children, className, ...rest }: PropsWithChildren<

components/empty-view/tsconfig.json

@@ -1,6 +1,9 @@
 {
-  "extends": "./tsconfig.src.json",
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"],
   "compilerOptions": {
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "outDir": "lib"
   }
 }

components/password-input/package.json

@@ -10,18 +10,18 @@
   },
   "license": "MIT",
   "author": "Axis Communications AB",
+  "type": "module",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./lib/cjs/index.js",
       "import": "./lib/index.js"
     }
   },
   "main": "lib/cjs/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
-  "files": [
-    "lib"
-  ],
+  "files": ["lib"],
   "scripts": {
     "build": "pnpm build:cjs && pnpm build:esm",
     "build:cjs": "tsc --module commonjs --outDir lib/cjs",

components/password-input/src/index.ts

@@ -1,3 +1,3 @@
-export { PasswordInput } from "./password-input";
-export { usePasswordInputStyles } from "./password-input.styles";
-export type { PasswordInputProps } from "./password-input.types";
+export { PasswordInput } from "./password-input.js";
+export { usePasswordInputStyles } from "./password-input.styles.js";
+export type { PasswordInputProps } from "./password-input.types.js";

components/password-input/src/password-input.tsx

@@ -7,8 +7,8 @@ import {
 } from "@fluentui/react-components";
 import { EyeOffRegular, EyeRegular } from "@fluentui/react-icons";
 
-import { PasswordInputProps } from "./password-input.types";
-import { usePasswordInputStyles } from "./password-input.styles";
+import { PasswordInputProps } from "./password-input.types.js";
+import { usePasswordInputStyles } from "./password-input.styles.js";
 
 export const PasswordInput: ForwardRefComponent<PasswordInputProps> = React
   .forwardRef((props: PasswordInputProps, ref) => {

hooks/package.json

@@ -10,22 +10,18 @@
   },
   "license": "MIT",
   "author": "Axis Communications AB",
+  "type": "module",
   "exports": {
     ".": {
       "require": "./lib/cjs/index.js",
       "import": "./lib/index.js"
     }
   },
-  "main": "lib/cjs/index.js",
-  "module": "lib/index.js",
-  "types": "lib/index.d.ts",
   "files": [
     "lib"
   ],
   "scripts": {
-    "build": "pnpm build:cjs && pnpm build:esm",
-    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
-    "build:esm": "tsc",
+    "build": "tsc",
     "check:unused-deps": "depcheck . --config=depcheck.yml",
     "lint": "tsc --noEmit && eslint . --cache"
   },

hooks/src/index.ts

@@ -1,2 +1,2 @@
-export { useMediaQuery } from "./use-media-query";
-export { usePageController } from "./use-page-controller";
+export { useMediaQuery } from "./use-media-query.js";
+export { usePageController } from "./use-page-controller.js";

hooks/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "outDir": "lib"
   },
   "include": ["src"],