fix(webpack): do not add withReact in webpack config

docs/generated/packages/webpack/documents/webpack-config-setup.md

@@ -24,7 +24,34 @@ You can configure Webpack using a `webpack.config.js` file in your project. You
 
 In that file, you can add the necessary configuration for Webpack. You can read more on how to configure webpack in the [Webpack documentation](https://webpack.js.org/concepts/configuration/).
 
-## Basic configuration for Nx
+## Using webpack with `isolatedConfig`
+
+You can set `isolatedConfig` to `true` in your `project.json` file, in the `build` target options:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "build": {
+            "executor": "@nrwl/webpack:webpack",
+            //...
+            "options": {
+                //...
+                "webpackConfig": "apps/my-app/webpack.config.js",
+                "isolatedConfig": true
+            },
+            "configurations": {
+                ...
+            }
+        },
+    }
+}
+```
+
+This means that Nx will not apply the webpack plugins automatically. In that case, you need to manually add these plugins in your `webpack.config.js` file for Nx to work properly. Let's see how to do that.
+
+### Basic configuration for Nx
 
 You should start with a basic webpack configuration for Nx in your project, that looks like this:
 
@@ -40,9 +67,9 @@ module.exports = composePlugins(withNx(), (config) => {
 
 The `withNx()` plugin adds the necessary configuration for Nx to work with Webpack. The `composePlugins` function allows you to add other plugins to the configuration.
 
-## Add configurations for other functionalities
+### Add configurations for other functionalities
 
-In addition to the basic configuration, you can add configurations for other frameworks or features. The `@nrwl/webpack` package provides plugins such as `withWeb` and `withReact`. This plugins provide features such as TS support, CSS support, JSX support, etc. You can read more about how these plugins work and how to use them in our [Webpack Plugins guide](/packages/webpack/documents/webpack-config-setup).
+In addition to the basic configuration, you can add configurations for other frameworks or features. The `@nrwl/webpack` package provides plugins such as `withWeb` and `withReact`. This plugins provide features such as TS support, CSS support, JSX support, etc. You can read more about how these plugins work and how to use them in our [Webpack Plugins guide](/packages/webpack/documents/webpack-plugins).
 
 You may still reconfigure everything manually, without using the Nx plugins. However, these plugins ensure that you have the necessary configuration for Nx to work with your project.
 

docs/generated/packages/webpack/executors/webpack.json

@@ -463,7 +463,7 @@
         ]
       }
     },
-    "examplesFile": "`project.json`:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n            \"executor\": \"@nrwl/webpack:webpack\",\n            //...\n            //...\n            \"options\": {\n                ...\n            },\n                //...\n            }\n        },\n    }\n}\n```\n\n```bash\nnx build my-app\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Add a path to your webpack.config.js file\" %}\n\nYou can configure Webpack using a `webpack.config.js` file. If you do so, you can set the path to this file in your `project.json` file, in the `build` target options:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n            \"executor\": \"@nrwl/webpack:webpack\",\n            //...\n            \"options\": {\n                //...\n                \"webpackConfig\": \"apps/my-app/webpack.config.js\"\n            },\n            \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\nRead more on how to configure Webpack in the [Nx Webpack configuration guide](/packages/webpack/documents/webpack-config-setup).\n\n{% /tab %}\n\n{% /tabs %}\n",
+    "examplesFile": "`project.json`:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n            \"executor\": \"@nrwl/webpack:webpack\",\n            //...\n            //...\n            \"options\": {\n                ...\n            },\n                //...\n            }\n        },\n    }\n}\n```\n\n```bash\nnx build my-app\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Add a path to your webpack.config.js file\" %}\n\nYou can configure Webpack using a `webpack.config.js` file. If you do so, you can set the path to this file in your `project.json` file, in the `build` target options:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n            \"executor\": \"@nrwl/webpack:webpack\",\n            //...\n            \"options\": {\n                //...\n                \"webpackConfig\": \"apps/my-app/webpack.config.js\"\n            },\n            \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\nRead more on how to configure Webpack in the [Nx Webpack configuration guide](/packages/webpack/documents/webpack-config-setup).\n\n{% /tab %}\n\n{% tab label=\"Run webpack with `isolatedConfig`\" %}\n\nYou can set `isolatedConfig` to `true` in your `project.json` file, in the `build` target options:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n            \"executor\": \"@nrwl/webpack:webpack\",\n            //...\n            \"options\": {\n                //...\n                \"webpackConfig\": \"apps/my-app/webpack.config.js\",\n                \"isolatedConfig\": true\n            },\n            \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\nThis means that Nx will not apply the webpack plugins automatically. In that case, plugins need to be applied in the project's `webpack.config.js` file (e.g. `withNx`, `withReact`, etc.), so you need to have set also the `webpackConfig` option. Read more on how to configure Webpack in our [Nx Webpack configuration guide](/packages/webpack/documents/webpack-config-setup) an in our [Webpack Plugins guide](/packages/webpack/documents/webpack-plugins).\n\n{% /tab %}\n\n{% /tabs %}\n",
     "presets": []
   },
   "description": "Run webpack build.",

docs/shared/packages/webpack/webpack-config-setup.md

@@ -24,7 +24,34 @@ You can configure Webpack using a `webpack.config.js` file in your project. You
 
 In that file, you can add the necessary configuration for Webpack. You can read more on how to configure webpack in the [Webpack documentation](https://webpack.js.org/concepts/configuration/).
 
-## Basic configuration for Nx
+## Using webpack with `isolatedConfig`
+
+You can set `isolatedConfig` to `true` in your `project.json` file, in the `build` target options:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "build": {
+            "executor": "@nrwl/webpack:webpack",
+            //...
+            "options": {
+                //...
+                "webpackConfig": "apps/my-app/webpack.config.js",
+                "isolatedConfig": true
+            },
+            "configurations": {
+                ...
+            }
+        },
+    }
+}
+```
+
+This means that Nx will not apply the webpack plugins automatically. In that case, you need to manually add these plugins in your `webpack.config.js` file for Nx to work properly. Let's see how to do that.
+
+### Basic configuration for Nx
 
 You should start with a basic webpack configuration for Nx in your project, that looks like this:
 
@@ -40,9 +67,9 @@ module.exports = composePlugins(withNx(), (config) => {
 
 The `withNx()` plugin adds the necessary configuration for Nx to work with Webpack. The `composePlugins` function allows you to add other plugins to the configuration.
 
-## Add configurations for other functionalities
+### Add configurations for other functionalities
 
-In addition to the basic configuration, you can add configurations for other frameworks or features. The `@nrwl/webpack` package provides plugins such as `withWeb` and `withReact`. This plugins provide features such as TS support, CSS support, JSX support, etc. You can read more about how these plugins work and how to use them in our [Webpack Plugins guide](/packages/webpack/documents/webpack-config-setup).
+In addition to the basic configuration, you can add configurations for other frameworks or features. The `@nrwl/webpack` package provides plugins such as `withWeb` and `withReact`. This plugins provide features such as TS support, CSS support, JSX support, etc. You can read more about how these plugins work and how to use them in our [Webpack Plugins guide](/packages/webpack/documents/webpack-plugins).
 
 You may still reconfigure everything manually, without using the Nx plugins. However, these plugins ensure that you have the necessary configuration for Nx to work with your project.
 

packages/webpack/docs/webpack-build-executor-examples.md

@@ -54,4 +54,33 @@ Read more on how to configure Webpack in the [Nx Webpack configuration guide](/p
 
 {% /tab %}
 
+{% tab label="Run webpack with `isolatedConfig`" %}
+
+You can set `isolatedConfig` to `true` in your `project.json` file, in the `build` target options:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "build": {
+            "executor": "@nrwl/webpack:webpack",
+            //...
+            "options": {
+                //...
+                "webpackConfig": "apps/my-app/webpack.config.js",
+                "isolatedConfig": true
+            },
+            "configurations": {
+                ...
+            }
+        },
+    }
+}
+```
+
+This means that Nx will not apply the webpack plugins automatically. In that case, plugins need to be applied in the project's `webpack.config.js` file (e.g. `withNx`, `withReact`, etc.), so you need to have set also the `webpackConfig` option. Read more on how to configure Webpack in our [Nx Webpack configuration guide](/packages/webpack/documents/webpack-config-setup) an in our [Webpack Plugins guide](/packages/webpack/documents/webpack-plugins).
+
+{% /tab %}
+
 {% /tabs %}

packages/webpack/src/migrations/update-15-6-3/__snapshots__/webpack-config-setup.spec.ts.snap

@@ -1,26 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`15.6.3 migration (setup webpack.config file) should create webpack.config.js file if it does not exist 1`] = `
+exports[`15.6.3 migration (setup webpack.config file) should create webpack.config.js for projects that do not have one 1`] = `
 "
         const { composePlugins, withNx } = require('@nrwl/webpack');
-        const { withReact } = require('@nrwl/react');
       
         // Nx plugins for webpack.
-        module.exports = composePlugins(withNx(), withReact(), (config) => {
+        module.exports = composePlugins(withNx(), (config) => {
           // Update the webpack config as needed here.
           // e.g. config.plugins.push(new MyPlugin())
           return config;
         });
         "
 `;
 
-exports[`15.6.3 migration (setup webpack.config file) should create webpack.config.js file if it does not exist 2`] = `
+exports[`15.6.3 migration (setup webpack.config file) should create webpack.config.js for projects that do not have one 2`] = `
 "
         const { composePlugins, withNx } = require('@nrwl/webpack');
-        const { withReact } = require('@nrwl/react');
       
         // Nx plugins for webpack.
-        module.exports = composePlugins(withNx(), withReact(), (config) => {
+        module.exports = composePlugins(withNx(), (config) => {
           // Update the webpack config as needed here.
           // e.g. config.plugins.push(new MyPlugin())
           return config;
@@ -31,10 +29,9 @@ exports[`15.6.3 migration (setup webpack.config file) should create webpack.conf
 exports[`15.6.3 migration (setup webpack.config file) should rename existing webpack.config file and create new one that requires it 1`] = `
 "
         const { composePlugins, withNx } = require('@nrwl/webpack');
-        const { withReact } = require('@nrwl/react');
 
         // Nx plugins for webpack.
-        module.exports = composePlugins(withNx(), withReact(), (config) => {
+        module.exports = composePlugins(withNx(), (config) => {
           // Note: This was added by an Nx migration.
           // You should consider inlining the logic into this file.
           return require('./webpack.config.js')(config);
@@ -43,21 +40,16 @@ exports[`15.6.3 migration (setup webpack.config file) should rename existing web
         "
 `;
 
-exports[`15.6.3 migration (setup webpack.config file) should rename existing webpack.config file and create new one that requires it 2`] = `null`;
-
 exports[`15.6.3 migration (setup webpack.config file) should rename existing webpack.config file and create new one that requires it 3`] = `
 "
         const { composePlugins, withNx } = require('@nrwl/webpack');
-        const { withReact } = require('@nrwl/react');
 
         // Nx plugins for webpack.
-        module.exports = composePlugins(withNx(), withReact(), (config) => {
+        module.exports = composePlugins(withNx(), (config) => {
           // Note: This was added by an Nx migration.
           // You should consider inlining the logic into this file.
           return require('./webpack.something.ts')(config);
         });
 
         "
 `;
-
-exports[`15.6.3 migration (setup webpack.config file) should rename existing webpack.config file and create new one that requires it 4`] = `null`;

packages/webpack/src/migrations/update-15-6-3/webpack-config-setup.spec.ts

@@ -43,6 +43,8 @@ describe('15.6.3 migration (setup webpack.config file)', () => {
       },
     });
 
+    tree.write('apps/app3/webpack.config.js', 'some content');
+
     addProjectConfiguration(tree, 'app4', {
       root: 'apps/app4',
       targets: {
@@ -55,6 +57,8 @@ describe('15.6.3 migration (setup webpack.config file)', () => {
       },
     });
 
+    tree.write('some/random/path/webpack.something.ts', 'some content');
+
     addProjectConfiguration(tree, 'app5', {
       root: 'apps/app5',
       targets: {
@@ -70,7 +74,7 @@ describe('15.6.3 migration (setup webpack.config file)', () => {
     await webpackConfigSetup(tree);
   });
 
-  it('should create webpack.config.js file if it does not exist', () => {
+  it('should create webpack.config.js for projects that do not have one', () => {
     expect(tree.read('apps/app1/webpack.config.js', 'utf-8')).toMatchSnapshot();
     expect(tree.read('apps/app2/webpack.config.js', 'utf-8')).toMatchSnapshot();
   });
@@ -79,15 +83,15 @@ describe('15.6.3 migration (setup webpack.config file)', () => {
     expect(tree.read('apps/app3/webpack.config.js', 'utf-8')).toMatchSnapshot();
     expect(
       tree.read('apps/app3/webpack.config.old.js', 'utf-8')
-    ).toMatchSnapshot();
+    ).toMatchInlineSnapshot(`"some content"`);
 
     expect(
       tree.read('some/random/path/webpack.something.ts', 'utf-8')
     ).toMatchSnapshot();
 
     expect(
       tree.read('some/random/path/webpack.something.old.ts', 'utf-8')
-    ).toMatchSnapshot();
+    ).toMatchInlineSnapshot(`"some content"`);
     expect(
       readProjectConfiguration(tree, 'app1').targets.build.options.webpackConfig
     ).toBe('apps/app1/webpack.config.js');

packages/webpack/src/migrations/update-15-6-3/webpack-config-setup.ts

@@ -7,6 +7,7 @@ import {
 } from '@nrwl/devkit';
 import { forEachExecutorOptions } from '@nrwl/workspace/src/utilities/executor-options-utils';
 import { WebpackExecutorOptions } from '../../executors/webpack/schema';
+import { basename } from 'path';
 
 export default async function (tree: Tree) {
   forEachExecutorOptions<WebpackExecutorOptions>(
@@ -28,6 +29,10 @@ export default async function (tree: Tree) {
       // executor options
 
       if (options?.webpackConfig) {
+        if (options.webpackConfig === '@nrwl/react/plugin/webpack') {
+          return;
+        }
+
         let oldName = options?.webpackConfig;
         if (options.webpackConfig.endsWith('.js')) {
           oldName = options.webpackConfig.replace('.js', '.old.js');
@@ -36,18 +41,17 @@ export default async function (tree: Tree) {
           oldName = options.webpackConfig.replace('.ts', '.old.ts');
         }
 
-        const justTheFileName = options.webpackConfig.split('/').pop();
+        const justTheFileName = basename(options.webpackConfig);
 
         renameFile(tree, options.webpackConfig, oldName);
 
         tree.write(
           options.webpackConfig,
           `
         const { composePlugins, withNx } = require('@nrwl/webpack');
-        const { withReact } = require('@nrwl/react');
 
         // Nx plugins for webpack.
-        module.exports = composePlugins(withNx(), withReact(), (config) => {
+        module.exports = composePlugins(withNx(), (config) => {
           // Note: This was added by an Nx migration.
           // You should consider inlining the logic into this file.
           return require('./${justTheFileName}')(config);
@@ -82,10 +86,9 @@ export default async function (tree: Tree) {
           options.webpackConfig,
           `
         const { composePlugins, withNx } = require('@nrwl/webpack');
-        const { withReact } = require('@nrwl/react');
       
         // Nx plugins for webpack.
-        module.exports = composePlugins(withNx(), withReact(), (config) => {
+        module.exports = composePlugins(withNx(), (config) => {
           // Update the webpack config as needed here.
           // e.g. config.plugins.push(new MyPlugin())
           return config;