Fix bugs discovered after skn build migration

.eslintrc

@@ -97,12 +97,6 @@
         "@shopify/jsx-no-hardcoded-content": "off"
       }
     },
-    {
-      "files": ["esnext/index.js"],
-      "rules": {
-        "import/no-unresolved": "off"
-      }
-    },
     {
       "files": ["playground/Playground.tsx"],
       "rules": {

package.json

@@ -34,7 +34,7 @@
   ],
   "main": "build/cjs/index.js",
   "module": "build/esm/index.js",
-  "esnext": "build/esnext/index.ts.esnext",
+  "esnext": "build/esnext/index.esnext",
   "types": "build/ts/latest/src/index.d.ts",
   "typesVersions": {
     "<4.0": {
@@ -101,7 +101,6 @@
     "@sewing-kit/plugin-jest": "^0.5.1",
     "@sewing-kit/plugin-package-build": "^0.5.1",
     "@sewing-kit/plugin-prettier": "^0.1.2",
-    "@sewing-kit/plugin-rollup": "^0.3.3",
     "@sewing-kit/plugin-stylelint": "^0.4.2",
     "@sewing-kit/plugin-typescript": "^0.6.1",
     "@shopify/babel-preset": "^24.1.2",
@@ -186,7 +185,7 @@
     },
     {
       "name": "esm",
-      "path": "build/esm/index.mjs",
+      "path": "build/esm/index.js",
       "limit": "105 kB"
     },
     {

scripts/build-validate.js

@@ -17,7 +17,7 @@ validateVersionReplacement();
 function validateStandardBuild() {
   // Standard build
   assert.ok(fs.existsSync('./build/cjs/index.js'));
-  assert.ok(fs.existsSync('./build/esm/index.mjs'));
+  assert.ok(fs.existsSync('./build/esm/index.js'));
   assert.ok(fs.existsSync('./build/esm/styles.css'));
 
   // Assert it uses named exports rather than properties from the React default
@@ -117,7 +117,7 @@ function validateVersionReplacement() {
 
   assert.deepStrictEqual(fileBuckets.includesVersion, [
     './build/cjs/configure.js',
-    './build/esm/configure.mjs',
+    './build/esm/configure.js',
     './build/esm/styles.css',
     './build/esnext/components/AppProvider/AppProvider.css',
     './build/esnext/configure.esnext',

sewing-kit.config.ts

@@ -9,8 +9,7 @@ import {
 } from '@sewing-kit/core';
 import {babel} from '@sewing-kit/plugin-babel';
 import {workspaceTypeScript} from '@sewing-kit/plugin-typescript';
-import {packageBuild} from '@sewing-kit/plugin-package-build';
-import {rollupPlugins} from '@sewing-kit/plugin-rollup';
+import {packageBuild, rollupPlugins} from '@sewing-kit/plugin-package-build';
 import {eslint} from '@sewing-kit/plugin-eslint';
 import {stylelint} from '@sewing-kit/plugin-stylelint';
 import {prettier} from '@sewing-kit/plugin-prettier';
@@ -47,7 +46,8 @@ function libraryPackagePlugin() {
       esmodules: true,
       esnext: true,
     }),
-    rollupAdjustmentsPlugin(),
+    rollupAdjustPluginsPlugin(),
+    rollupAdjustOutputPlugin(),
     jestAdjustmentsPlugin(),
   ]);
 }
@@ -153,7 +153,7 @@ function preAndPostBuildPlugin() {
   });
 }
 
-function rollupAdjustmentsPlugin() {
+function rollupAdjustPluginsPlugin() {
   return rollupPlugins((target) => {
     const stylesConfig = target.options.rollupEsnext
       ? {
@@ -182,3 +182,44 @@ function rollupAdjustmentsPlugin() {
     ];
   });
 }
+
+/**
+ * Output .js files for the esm build instead of .mjs files
+ *
+ * By default webpack 4 handles imports within js and mjs files differently.
+ * mjs files are subject to a stricter set of rules when importing from commonjs
+ * files such as react.
+ * Some apps (including sewing-kit based apps) work around this by adding
+ * `config.module.rules.push({test: /\.mjs$/, type: 'javascript/auto'});`
+ * to their webpack config, which tells webpack to treat .mjs files the same
+ * as .js files. However we should not rely on this behaviour being present.
+ *
+ * Thus publish our esm files with a .js file extension.
+ */
+function rollupAdjustOutputPlugin() {
+  return createProjectPlugin('PolarisJest', ({tasks: {build}}) => {
+    build.hook(({hooks}) => {
+      hooks.target.hook(({hooks, target}) => {
+        const isDefaultBuild = Object.keys(target.options).length === 0;
+        if (!isDefaultBuild) {
+          return;
+        }
+
+        hooks.configure.hook(async (configuration) => {
+          configuration.rollupOutputs?.hook((outputs) => {
+            for (const output of outputs) {
+              if (typeof output.entryFileNames === 'string') {
+                output.entryFileNames = output.entryFileNames.replace(
+                  /\.mjs$/,
+                  '.js',
+                );
+              }
+            }
+
+            return outputs;
+          });
+        });
+      });
+    });
+  });
+}