fix: replace .mjs with .js extension for browser modules (#887)

The Babel interpretation should be used when modules are imported for the browser, which is not the case if the extension is .mjs (in which case Node interpretation is used). See https://esbuild.github.io/content-types/#default-interop
AxisCommunications · Jan 12, 2024 · 4a67ac8 · 4a67ac8
1 parent 49a1763
commit 4a67ac8
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 24 deletions.
diff --git a/overlay/esbuild.mjs b/overlay/esbuild.mjs
@@ -12,14 +12,14 @@ if (!existsSync(buildDir)) {
 
 for (
   const output of [
-    { format: 'esm', ext: 'mjs' },
-    { format: 'cjs', ext: 'cjs' },
+    { format: 'esm', name: 'index-esm.js' },
+    { format: 'cjs', name: 'index-cjs.js' },
   ]
 ) {
   buildSync({
     platform: 'browser',
     entryPoints: ['src/index.ts'],
-    outfile: join(buildDir, `index.${output.ext}`),
+    outfile: join(buildDir, output.name),
     format: output.format,
     external: ['@juggle/resize-observer', 'react', 'react-dom', 'pepjs'],
     bundle: true,

diff --git a/overlay/package.json b/overlay/package.json
@@ -15,12 +15,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index-cjs.js",
+  "module": "./dist/index-esm.js",
   "exports": {
     "types": "./dist/index.d.ts",
-    "require": "./dist/index.cjs",
-    "import": "./dist/index.mjs"
+    "require": "./dist/index-cjs.js",
+    "import": "./dist/index-esm.js"
   },
   "files": [
     "dist/**/*",
@@ -31,7 +31,8 @@
     "@juggle/resize-observer": "^3.3.1",
     "pepjs": ">= 0.4.3 < 1",
     "react": "^17.0.1 || ^18.0.0",
-    "react-dom": "^17.0.1 || ^18.0.0"
+    "react-dom": "^17.0.1 || ^18.0.0",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@juggle/resize-observer": "3.4.0",

diff --git a/player/esbuild.mjs b/player/esbuild.mjs
@@ -11,8 +11,8 @@ if (!existsSync(buildDir)) {
 }
 
 const bundles = [
-  { format: 'esm', name: 'index.mjs' },
-  { format: 'cjs', name: 'index.cjs' },
+  { format: 'esm', name: 'index-esm.js' },
+  { format: 'cjs', name: 'index-cjs.js' },
 ]
 
 for (

diff --git a/player/package.json b/player/package.json
@@ -19,13 +19,13 @@
     "registry": "https://registry.npmjs.org/"
   },
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index-cjs.js",
+  "module": "./dist/index-esm.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "require": "./dist/index-cjs.js",
+      "import": "./dist/index-esm.js"
     }
   },
   "files": [

diff --git a/streams/esbuild.mjs b/streams/esbuild.mjs
@@ -13,24 +13,24 @@ if (!existsSync(buildDir)) {
 const browserBundles = [
   {
     format: 'esm',
-    name: 'browser.mjs',
+    name: 'browser-esm.js',
     external: ['debug', 'ts-md5', 'ws'],
     inject: ['polyfill.mjs'],
   },
   {
     format: 'cjs',
-    name: 'browser.cjs',
+    name: 'browser-cjs.js',
     external: ['debug', 'ts-md5', 'ws'],
     inject: ['polyfill.mjs'],
   },
   {
     format: 'esm',
-    name: 'browser-light.mjs',
+    name: 'browser-light-esm.js',
     external: ['buffer', 'debug', 'process', 'stream', 'ts-md5', 'ws'],
   },
   {
     format: 'cjs',
-    name: 'browser-light.cjs',
+    name: 'browser-light-cjs.js',
     external: ['buffer', 'debug', 'process', 'stream', 'ts-md5', 'ws'],
   },
 ]

diff --git a/streams/package.json b/streams/package.json
@@ -24,8 +24,8 @@
       "types": "./dist/src/index.browser.d.ts",
       "browser": {
         "types": "./dist/src/index.browser.d.ts",
-        "require": "./dist/browser.cjs",
-        "import": "./dist/browser.mjs"
+        "require": "./dist/browser-cjs.js",
+        "import": "./dist/browser-esm.js"
       },
       "node": {
         "types": "./dist/src/index.node.d.ts",
@@ -35,13 +35,13 @@
     },
     "./light": {
       "types": "./dist/src/index.browser.d.ts",
-      "require": "./dist/browser-light.cjs",
-      "import": "./dist/browser-light.mjs"
+      "require": "./dist/browser-light-cjs.js",
+      "import": "./dist/browser-light-esm.js"
     }
   },
   "browser": {
-    "./dist/node.cjs": "./dist/browser.cjs",
-    "./dist/node.mjs": "./dist/browser.mjs",
+    "./dist/node.cjs": "./dist/browser-cjs.js",
+    "./dist/node.mjs": "./dist/browser-esm.js",
     "stream": "stream-browserify"
   },
   "files": [