From d4a0554671e2932feac5123028abbd8817d9364b Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Mon, 6 Mar 2023 16:45:33 -0500
Subject: [PATCH] fix(bundling): default Node scriptType to CommonJS since it
 has the widest compatibility (#15483)

(cherry picked from commit d7cd1538e5c1bcd45ec0a58815a83bb40c5f9c80)
---
 e2e/webpack/src/webpack.test.ts               | 19 +++++++++++-
 .../webpack-project/webpack-project.ts        | 30 +++++++++++++++++++
 packages/webpack/src/utils/with-nx.ts         |  3 +-
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/e2e/webpack/src/webpack.test.ts b/e2e/webpack/src/webpack.test.ts
index 01264119e3e00..7b5e32cf659e7 100644
--- a/e2e/webpack/src/webpack.test.ts
+++ b/e2e/webpack/src/webpack.test.ts
@@ -22,8 +22,25 @@ describe('Webpack Plugin', () => {
     runCLI(
       `generate @nrwl/webpack:webpack-project ${myPkg} --target=node --tsConfig=libs/${myPkg}/tsconfig.lib.json --main=libs/${myPkg}/src/index.ts`
     );
+
+    // Test `scriptType` later during during.
+    updateFile(
+      `libs/${myPkg}/webpack.config.js`,
+      `
+const { composePlugins, withNx } = require('@nrwl/webpack');
+
+module.exports = composePlugins(withNx(), (config) => {
+  console.log('scriptType is ' + config.output.scriptType);
+  return config;
+});
+`
+    );
+
     rmDist();
-    runCLI(`build ${myPkg}`);
+
+    const buildOutput = runCLI(`build ${myPkg}`);
+    // Ensure scriptType is not set if we're in Node (it only applies to Web).
+    expect(buildOutput).toContain('scriptType is undefined');
     let output = runCommand(`node dist/libs/${myPkg}/main.js`);
     expect(output).toMatch(/Hello/);
     expect(output).not.toMatch(/Conflicting/);
diff --git a/packages/webpack/src/generators/webpack-project/webpack-project.ts b/packages/webpack/src/generators/webpack-project/webpack-project.ts
index 28df0190f9df7..b8b3188c2e737 100644
--- a/packages/webpack/src/generators/webpack-project/webpack-project.ts
+++ b/packages/webpack/src/generators/webpack-project/webpack-project.ts
@@ -55,6 +55,7 @@ function addBuildTarget(tree: Tree, options: WebpackProjectGeneratorSchema) {
     main: options.main ?? joinPathFragments(project.root, 'src/main.ts'),
     tsConfig:
       options.tsConfig ?? joinPathFragments(project.root, 'tsconfig.app.json'),
+    webpackConfig: joinPathFragments(project.root, 'webpack.config.js'),
   };
 
   if (options.webpackConfig) {
@@ -67,6 +68,35 @@ function addBuildTarget(tree: Tree, options: WebpackProjectGeneratorSchema) {
     buildOptions.babelUpwardRootMode = true;
   }
 
+  if (options.target === 'node') {
+    tree.write(
+      joinPathFragments(project.root, 'webpack.config.js'),
+      `
+const { composePlugins, withNx } = require('@nrwl/webpack');
+
+// Nx plugins for webpack.
+module.exports = composePlugins(withNx(), (config) => {
+  // Update the webpack config as needed here.
+  // e.g. \`config.plugins.push(new MyPlugin())\`
+  return config;
+});
+`
+    );
+  } else {
+    tree.write(
+      joinPathFragments(project.root, 'webpack.config.js'),
+      `
+const { composePlugins, withNx, withWeb } = require('@nrwl/webpack');
+
+// Nx plugins for webpack.
+module.exports = composePlugins(withNx(), withWeb(), (config) => {
+  // Update the webpack config as needed here.
+  // e.g. \`config.plugins.push(new MyPlugin())\`
+  return config;
+});
+`
+    );
+  }
   updateProjectConfiguration(tree, options.project, {
     ...project,
     targets: {
diff --git a/packages/webpack/src/utils/with-nx.ts b/packages/webpack/src/utils/with-nx.ts
index a2e24b8b61325..341a7f7fd5472 100644
--- a/packages/webpack/src/utils/with-nx.ts
+++ b/packages/webpack/src/utils/with-nx.ts
@@ -167,7 +167,8 @@ export function withNx(pluginOptions?: WithNxOptions): NxWebpackPlugin {
         hashFunction: 'xxhash64',
         // Disabled for performance
         pathinfo: false,
-        scriptType: 'module' as const,
+        // Use CJS for Node since it has the widest support.
+        scriptType: options.target === 'node' ? undefined : ('module' as const),
       },
       watch: options.watch,
       watchOptions: {