From ea451bbbbe882e924304875124bfb193dc66b784 Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Thu, 29 Dec 2022 13:12:10 -0500
Subject: [PATCH] fix(bundling): detect esm vs cjs type for .js files

---
 e2e/react/src/react.test.ts          | 10 +++++++++-
 packages/webpack/src/utils/config.ts |  7 +++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/e2e/react/src/react.test.ts b/e2e/react/src/react.test.ts
index 950dde0104292..671fa16c3ae28 100644
--- a/e2e/react/src/react.test.ts
+++ b/e2e/react/src/react.test.ts
@@ -78,6 +78,7 @@ 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`
@@ -85,11 +86,18 @@ describe('React Applications', () => {
     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, {
diff --git a/packages/webpack/src/utils/config.ts b/packages/webpack/src/utils/config.ts
index 2d7e04860f8b6..68a1525375ba3 100644
--- a/packages/webpack/src/utils/config.ts
+++ b/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),
     },