fix(bundling): default Node scriptType to CommonJS since it has the w…

…idest compatibility (#15483)
nrwl · Mar 6, 2023 · d7cd153 · d7cd153
1 parent b74fc1b
commit d7cd153
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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: {