fix(bundling): detect esm vs cjs type for .js files (#14060)

e2e/react/src/react.test.ts

@@ -78,18 +78,26 @@ describe('React Applications', () => {
   it('should be able to use JS and JSX', async () => {
     const appName = uniq('app');
     const libName = uniq('lib');
+    const plainJsLib = uniq('jslib');
 
     runCLI(
       `generate @nrwl/react:app ${appName} --bundler=webpack --no-interactive --js`
     );
     runCLI(
       `generate @nrwl/react:lib ${libName} --no-interactive --js --unit-test-runner=none`
     );
+    // Make sure plain JS libs can be imported as well.
+    // There was an issue previously: https://github.com/nrwl/nx/issues/10990
+    runCLI(
+      `generate @nrwl/js:lib ${plainJsLib} --js --unit-test-runner=none --bundler=none --compiler=tsc --no-interactive`
+    );
 
     const mainPath = `apps/${appName}/src/main.js`;
     updateFile(
       mainPath,
-      `import '@${proj}/${libName}';\n${readFile(mainPath)}`
+      `import '@${proj}/${libName}';\nimport '@${proj}/${plainJsLib}';\n${readFile(
+        mainPath
+      )}`
     );
 
     await testGeneratedApp(appName, {

packages/webpack/src/utils/config.ts

@@ -115,6 +115,13 @@ export function getBaseWebpackPartial(
             fullySpecified: false,
           },
         },
+        // There's an issue when using buildable libs and .js files (instead of .ts files),
+        // where the wrong type is used (commonjs vs esm) resulting in export-imports throwing errors.
+        // See: https://github.com/nrwl/nx/issues/10990
+        {
+          test: /\.js$/,
+          type: 'javascript/auto',
+        },
         createLoaderFromCompiler(options, internalOptions),
       ].filter(Boolean),
     },