feat(webpack): remove isolatedConfig option from @nx/webpack:webpack

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

@@ -307,12 +307,6 @@
         "type": "boolean",
         "description": "Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or `<https://webpack.github.io/analyse>`."
       },
-      "isolatedConfig": {
-        "type": "boolean",
-        "description": "Do not apply Nx webpack plugins automatically. Plugins need to be applied in the project's webpack.config.js file (e.g. withNx, withReact, etc.).",
-        "default": true,
-        "x-deprecated": "Automatic configuration of Webpack is deprecated in favor of an explicit 'webpack.config.js' file. This option will be removed in Nx 19. See https://nx.dev/recipes/webpack/webpack-config-setup."
-      },
       "standardWebpackConfigFunction": {
         "type": "boolean",
         "description": "Set to true if the webpack config exports a standard webpack function, not an Nx-specific one. See: https://webpack.js.org/configuration/configuration-types/#exporting-a-function",
@@ -377,7 +371,7 @@
         "x-completion-type": "file"
       }
     },
-    "required": [],
+    "required": ["webpackConfig"],
     "definitions": {
       "assetPattern": {
         "oneOf": [
@@ -455,7 +449,7 @@
         ]
       }
     },
-    "examplesFile": "---\ntitle: Examples for the @nx/webpack:webpack build executor\ndescription: Examples and a short guide on how to use the @nx/webpack:webpack build executor\n---\n\n`project.json`:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n            \"executor\": \"@nx/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\n{% tab label=\"Using `babelUpwardRootMode`\" %}\n\nCopying from the [Babel documentation](https://babeljs.io/docs/config-files#root-babelconfigjson-file):\n\n> [...] if you are running your Babel compilation process from within a subpackage, you need to tell Babel where to look for the config. There are a few ways to do that, but the recommended way is the \"rootMode\" option with \"upward\", which will make Babel search from the working directory upward looking for your babel.config.json file, and will use its location as the \"root\" value.\n\nSetting `babelUpwardRootMode` to `true` in your `project.json` will set `rootMode` option to `upward` in the Babel config. You may want the `upward` mode in a monorepo when projects must apply their individual `.babelrc` file. We recommend that you don't set it at all, so it will use the default to `false` as the `upward` mode brings additional complexity to the build process.\n\n```json\n//...\n\"my-app\": {\n  \"targets\": {\n    \"build\": {\n      \"executor\": \"@nx/webpack:webpack\",\n      \"options\": {\n          \"babelUpwardRootMode\": true,\n          //...\n      },\n      //...\n    },\n    //...\n  },\n  //...\n}\n```\n\nWhen `babelUpwardRootMode` is `true`, Babel will look for a root `babel.config.json` at the root of the workspace, which should look something like this to include all packages:\n\n```json\n{ \"babelrcRoots\": [\"*\"] }\n```\n\nThen for each package, you must have a `.babelrc` file that will be applied to that package. For example:\n\n```json\n{\n  \"presets\": [\"@babel/preset-env\", \"@babel/preset-typescript\"]\n}\n```\n\nAll packages will use its own `.babelrc` file, thus you must ensure the right presets and plugins are set in each config file. This behavior can lead to build discrepancies between packages, so we recommend that you don't set `babelUpwardRootMode` at all.\n\n```treeview\n├── apps\n│   └── demo\n│       └── .babelrc\n├── libs\n│   ├── a\n│   │   └── .babelrc\n│   └── b\n│       └── .babelrc\n└── babel.config.json\n```\n\nIn workspace above, if `demo` imports `a` and `b`, it will apply the config `libs/a/.babelrc` and `libs/b/.babelrc` to the respective packages and not apply its own `apps/demo/.babelrc` to `a` and `b`. Anything in `babel.config.json` will apply to all packages.\n\n{% /tab %}\n\n{% tab label=\"Specify a custom Babel config file\" %}\n\nIf you have a custom Babel config file (i.e. not `.babelrc`), you can use the `configFile` option as follows:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n            \"executor\": \"@nx/webpack:webpack\",\n            //...\n            \"options\": {\n                //...\n                \"babelConfig\": \"apps/my-app/.babelrc.custom.json\",\n            },\n            \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\nIf you do not set the path to the `.babelrc` file, Nx will look for a `.babelrc` file in the root of your application.\n\nNote that this option does not work if `babelUpwardRootMode` is set to `true`.\n\n{% /tab %}\n\n{% tab label=\"Run webpack with `isolatedConfig`\" %}\n\nSetting `isolatedConfig` to `true` in your `project.json` file means that Nx will not apply the Nx webpack plugins automatically. In that case, the Nx plugins need to be applied in the project's `webpack.config.js` file (e.g. `withNx`, `withReact`, etc.). So don't forget to also specify the path to your webpack config file (using the `webpackConfig` option).\n\nRead more on how to configure Webpack in our [Nx Webpack config guide](/recipes/webpack/webpack-config-setup) an in our [Webpack Plugins guide](/recipes/webpack/webpack-plugins).\n\nNote that this is the new default setup for webpack in the latest version of Nx.\n\nSet `isolatedConfig` to `true` in your `project.json` file in the `build` target options like this:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n            \"executor\": \"@nx/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\n{% /tab %}\n\n{% /tabs %}\n",
+    "examplesFile": "---\ntitle: Examples for the @nx/webpack:webpack build executor\ndescription: Examples and a short guide on how to use the @nx/webpack:webpack build executor\n---\n\n`project.json`:\n\n```json5\n//...\n\"my-app\": {\n  \"targets\": {\n    \"build\": {\n      \"executor\": \"@nx/webpack:webpack\",\n      \"options\": {\n        \"webpackConfig\": \"apps/my-app/webpack.config.js\"\n      }\n    },\n    //...\n  }\n}\n```\n\n```bash\nnx build my-app\n```\n\n## Examples\n\n{% tabs %}\n\n{% tab label=\"Using `babelUpwardRootMode`\" %}\n\nCopying from the [Babel documentation](https://babeljs.io/docs/config-files#root-babelconfigjson-file):\n\n> [...] if you are running your Babel compilation process from within a subpackage, you need to tell Babel where to look for the config. There are a few ways to do that, but the recommended way is the \"rootMode\" option with \"upward\", which will make Babel search from the working directory upward looking for your babel.config.json file, and will use its location as the \"root\" value.\n\nSetting `babelUpwardRootMode` to `true` in your `project.json` will set `rootMode` option to `upward` in the Babel config. You may want the `upward` mode in a monorepo when projects must apply their individual `.babelrc` file. We recommend that you don't set it at all, so it will use the default to `false` as the `upward` mode brings additional complexity to the build process.\n\n```json5\n//...\n\"my-app\": {\n  \"targets\": {\n    \"build\": {\n      \"executor\": \"@nx/webpack:webpack\",\n      \"options\": {\n        \"webpackConfig\": \"apps/my-app/webpack.config.js\",\n        \"babelUpwardRootMode\": true\n      }\n    },\n    //...\n  }\n}\n```\n\nWhen `babelUpwardRootMode` is `true`, Babel will look for a root `babel.config.json` at the root of the workspace, which should look something like this to include all packages:\n\n```json\n{ \"babelrcRoots\": [\"*\"] }\n```\n\nThen for each package, you must have a `.babelrc` file that will be applied to that package. For example:\n\n```json\n{\n  \"presets\": [\"@babel/preset-env\", \"@babel/preset-typescript\"]\n}\n```\n\nAll packages will use its own `.babelrc` file, thus you must ensure the right presets and plugins are set in each config file. This behavior can lead to build discrepancies between packages, so we recommend that you don't set `babelUpwardRootMode` at all.\n\n```treeview\n├── apps\n│   └── demo\n│       └── .babelrc\n├── libs\n│   ├── a\n│   │   └── .babelrc\n│   └── b\n│       └── .babelrc\n└── babel.config.json\n```\n\nIn workspace above, if `demo` imports `a` and `b`, it will apply the config `libs/a/.babelrc` and `libs/b/.babelrc` to the respective packages and not apply its own `apps/demo/.babelrc` to `a` and `b`. Anything in `babel.config.json` will apply to all packages.\n\n{% /tab %}\n\n{% tab label=\"Specify a custom Babel config file\" %}\n\nIf you have a custom Babel config file (i.e. not `.babelrc`), you can use the `configFile` option as follows:\n\n```json5\n//...\n\"my-app\": {\n  \"targets\": {\n    \"build\": {\n      \"executor\": \"@nx/webpack:webpack\",\n      \"options\": {\n        \"webpackConfig\": \"apps/my-app/webpack.config.js\",\n        \"babelConfig\": \"apps/my-app/.babelrc.custom.json\",\n      }\n    },\n    // ...\n  }\n}\n```\n\nIf you do not set the path to the `.babelrc` file, Nx will look for a `.babelrc` file in the root of your application.\n\nNote that this option does not work if `babelUpwardRootMode` is set to `true`.\n\n{% /tab %}\n\n{% /tabs %}\n",
     "presets": []
   },
   "description": "Run webpack build.",

packages/react/plugins/component-testing/index.ts

@@ -283,7 +283,10 @@ function buildTargetWebpack(
 
   return async () => {
     customWebpack = await customWebpack;
-    // TODO(v19): Once webpackConfig is always set in @nx/webpack:webpack and isolatedConfig is removed, we no longer need this default.
+    // TODO(v20): Component testing need to be agnostic of the underlying executor. With Crystal, we're not using `@nx/webpack:webpack` by default.
+    // We need to decouple CT from the build target of the app, we just care about bundler config (e.g. webpack.config.js).
+    // The generated setup should support both Webpack and Vite as documented here: https://docs.cypress.io/guides/component-testing/react/overview
+    // Related issue: https://github.com/nrwl/nx/issues/21546
     const configure = composePluginsSync(withNx(), withWeb());
     const defaultWebpack = configure(
       {},

packages/storybook/src/generators/migrate-7/test-configs/all-projects.json

@@ -526,7 +526,6 @@
           "assets": ["apps/rw1/src/favicon.ico", "apps/rw1/src/assets"],
           "styles": ["apps/rw1/src/styles.css"],
           "scripts": [],
-          "isolatedConfig": true,
           "webpackConfig": "apps/rw1/webpack.config.js"
         },
         "configurations": {

packages/storybook/src/migrations/update-16-5-0/test-configs/storybook-projects.json

@@ -137,7 +137,6 @@
           ],
           "styles": ["apps/webpack-app/src/styles.css"],
           "scripts": [],
-          "isolatedConfig": true,
           "webpackConfig": "apps/webpack-app/webpack.config.js",
           "fileReplacements": [
             {

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

@@ -5,22 +5,18 @@ description: Examples and a short guide on how to use the @nx/webpack:webpack bu
 
 `project.json`:
 
-```json
+```json5
 //...
 "my-app": {
-    "targets": {
-        //...
-        "build": {
-            "executor": "@nx/webpack:webpack",
-            //...
-            //...
-            "options": {
-                ...
-            },
-                //...
-            }
-        },
-    }
+  "targets": {
+    "build": {
+      "executor": "@nx/webpack:webpack",
+      "options": {
+        "webpackConfig": "apps/my-app/webpack.config.js"
+      }
+    },
+    //...
+  }
 }
 ```
 
@@ -40,21 +36,19 @@ Copying from the [Babel documentation](https://babeljs.io/docs/config-files#root
 
 Setting `babelUpwardRootMode` to `true` in your `project.json` will set `rootMode` option to `upward` in the Babel config. You may want the `upward` mode in a monorepo when projects must apply their individual `.babelrc` file. We recommend that you don't set it at all, so it will use the default to `false` as the `upward` mode brings additional complexity to the build process.
 
-```json
+```json5
 //...
 "my-app": {
   "targets": {
     "build": {
       "executor": "@nx/webpack:webpack",
       "options": {
-          "babelUpwardRootMode": true,
-          //...
-      },
-      //...
+        "webpackConfig": "apps/my-app/webpack.config.js",
+        "babelUpwardRootMode": true
+      }
     },
     //...
-  },
-  //...
+  }
 }
 ```
 
@@ -94,23 +88,19 @@ In workspace above, if `demo` imports `a` and `b`, it will apply the config `lib
 
 If you have a custom Babel config file (i.e. not `.babelrc`), you can use the `configFile` option as follows:
 
-```json
+```json5
 //...
 "my-app": {
-    "targets": {
-        //...
-        "build": {
-            "executor": "@nx/webpack:webpack",
-            //...
-            "options": {
-                //...
-                "babelConfig": "apps/my-app/.babelrc.custom.json",
-            },
-            "configurations": {
-                ...
-            }
-        },
-    }
+  "targets": {
+    "build": {
+      "executor": "@nx/webpack:webpack",
+      "options": {
+        "webpackConfig": "apps/my-app/webpack.config.js",
+        "babelConfig": "apps/my-app/.babelrc.custom.json",
+      }
+    },
+    // ...
+  }
 }
 ```
 
@@ -120,37 +110,4 @@ Note that this option does not work if `babelUpwardRootMode` is set to `true`.
 
 {% /tab %}
 
-{% tab label="Run webpack with `isolatedConfig`" %}
-
-Setting `isolatedConfig` to `true` in your `project.json` file means that Nx will not apply the Nx webpack plugins automatically. In that case, the Nx plugins need to be applied in the project's `webpack.config.js` file (e.g. `withNx`, `withReact`, etc.). So don't forget to also specify the path to your webpack config file (using the `webpackConfig` option).
-
-Read more on how to configure Webpack in our [Nx Webpack config guide](/recipes/webpack/webpack-config-setup) an in our [Webpack Plugins guide](/recipes/webpack/webpack-plugins).
-
-Note that this is the new default setup for webpack in the latest version of Nx.
-
-Set `isolatedConfig` to `true` in your `project.json` file in the `build` target options like this:
-
-```json
-//...
-"my-app": {
-    "targets": {
-        //...
-        "build": {
-            "executor": "@nx/webpack:webpack",
-            //...
-            "options": {
-                //...
-                "webpackConfig": "apps/my-app/webpack.config.js",
-                "isolatedConfig": true
-            },
-            "configurations": {
-                ...
-            }
-        },
-    }
-}
-```
-
-{% /tab %}
-
 {% /tabs %}

packages/webpack/migrations.json

@@ -35,6 +35,12 @@
       "version": "17.2.1-beta.0",
       "description": "Add webpack.config.js file when webpackConfig is not defined",
       "implementation": "./src/migrations/update-17-2-1/webpack-config-setup"
+    },
+    "update-19-0-0-webpack-config-setup": {
+      "cli": "nx",
+      "version": "19.0.0-beta.9",
+      "description": "Add webpack.config.js file when webpackConfig is not defined",
+      "implementation": "./src/migrations/update-19-0-0/webpack-config-setup"
     }
   },
   "packageJsonUpdates": {

packages/webpack/src/executors/webpack/schema.d.ts

@@ -47,9 +47,6 @@ export interface WebpackExecutorOptions {
   extractLicenses?: boolean;
   fileReplacements?: FileReplacement[];
   generatePackageJson?: boolean;
-  // TODO(v19): Remove this option
-  /** @deprecated set webpackConfig and provide an explicit webpack.config.js file (See: https://nx.dev/recipes/webpack/webpack-config-setup) */
-  isolatedConfig?: boolean;
   standardWebpackConfigFunction?: boolean;
   main?: string;
   memoryLimit?: number;

packages/webpack/src/executors/webpack/schema.json

@@ -231,12 +231,6 @@
       "type": "boolean",
       "description": "Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or `<https://webpack.github.io/analyse>`."
     },
-    "isolatedConfig": {
-      "type": "boolean",
-      "description": "Do not apply Nx webpack plugins automatically. Plugins need to be applied in the project's webpack.config.js file (e.g. withNx, withReact, etc.).",
-      "default": true,
-      "x-deprecated": "Automatic configuration of Webpack is deprecated in favor of an explicit 'webpack.config.js' file. This option will be removed in Nx 19. See https://nx.dev/recipes/webpack/webpack-config-setup."
-    },
     "standardWebpackConfigFunction": {
       "type": "boolean",
       "description": "Set to true if the webpack config exports a standard webpack function, not an Nx-specific one. See: https://webpack.js.org/configuration/configuration-types/#exporting-a-function",
@@ -301,7 +295,7 @@
       "x-completion-type": "file"
     }
   },
-  "required": [],
+  "required": ["webpackConfig"],
   "definitions": {
     "assetPattern": {
       "oneOf": [

packages/webpack/src/executors/webpack/webpack.impl.ts

@@ -39,9 +39,9 @@ async function getWebpackConfigs(
   options: NormalizedWebpackExecutorOptions,
   context: ExecutorContext
 ): Promise<Configuration | Configuration[]> {
-  if (options.isolatedConfig && !options.webpackConfig) {
+  if (!options.webpackConfig) {
     throw new Error(
-      `Using "isolatedConfig" without a "webpackConfig" is not supported.`
+      'webpackConfig option is missing from target configuration'
     );
   }
 
@@ -57,11 +57,7 @@ async function getWebpackConfigs(
     }
   }
 
-  const config = options.isolatedConfig
-    ? {}
-    : (options.target === 'web'
-        ? composePluginsSync(withNx(options), withWeb(options))
-        : withNx(options))({}, { options, context });
+  const config = {};
 
   if (
     typeof userDefinedWebpackConfig === 'function' &&

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

@@ -78,7 +78,7 @@ export default async function (tree: Tree) {
         `
         );
 
-        options.isolatedConfig = true;
+        options['isolatedConfig'] = true;
 
         projectConfiguration.targets[targetName][
           configurationName ?? 'options'
@@ -106,7 +106,7 @@ export default async function (tree: Tree) {
         }
 
         options.webpackConfig = `${projectConfiguration.root}/webpack.config.js`;
-        options.isolatedConfig = true;
+        options['isolatedConfig'] = true;
 
         tree.write(
           options.webpackConfig,