build(many): resolve .js specifiers to TypeScript source in webpack

The explicit .js relative-import extensions added for native ESM must still
resolve when webpack bundles the .ts/.tsx source directly (Cypress component
tests and the docs app). Add resolve.extensionAlias mapping .js->.ts/.tsx to
the Cypress and ui-webpack-config configs so the source prep does not break
those builds. No transpiler change.

Author: joyenjoyer

cypress/webpack.config.cjs

@@ -78,6 +78,14 @@ module.exports = {
   mode: 'development',
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
+    // Source carries explicit `.js` extensions on relative imports (added for
+    // native-ESM library output). When bundling `.ts`/`.tsx` source directly,
+    // map a `.js` specifier back to its TypeScript source.
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js'],
+      '.jsx': ['.tsx', '.jsx'],
+      '.mjs': ['.mts', '.mjs']
+    },
     alias: getWorkspaceAliases(),
     fallback: {
       fs: false,

packages/ui-webpack-config/config/index.js

@@ -49,7 +49,16 @@ const config = {
       path: false,
       process: false // needed for Sinon 12+
     },
-    extensions: ['.ts', '.tsx', '.js', '.json']
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+    // Source now carries explicit `.js` extensions on relative imports (added
+    // for native-ESM library output). When bundling the `.ts`/`.tsx` source
+    // directly, map a `.js` specifier back to its TypeScript source so webpack
+    // can resolve e.g. `import '../globals.js'` to `globals.ts`.
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js'],
+      '.jsx': ['.tsx', '.jsx'],
+      '.mjs': ['.mts', '.mjs']
+    }
   }
 }