chore(js): bump some v21 removal to v22 (#30911)

This PR bumps two v21 removals to v22:
1. SWC inline feature -- some people still use it even though it's
experimental. We should rethink how to remove this.
2. Cypress component testing not relying on `@nx/webpack:webpack`
executor -- we need a separate `webpack.cy.config.js` that only
configures the plugins needed Cypress CT.

This PR also keeps the Webpack plugin exports of `@nx/react` and
`@nx/webpack` packages. The `convert-to-inferred` and app generators
have been using the `@nx/react/webpack-plugin` and
`@nx/webpack/app-plugin` already for a while, there's no harm to keep
the exports in the index for older projects if they haven't been
updated.

packages/js/src/utils/swc/compile-swc.ts

@@ -21,7 +21,7 @@ function getSwcCmd(
 ) {
   const swcCLI = require.resolve('@swc/cli/bin/swc.js');
   let inputDir: string;
-  // TODO(v21): remove inline feature
+  // TODO(v22): remove inline feature
   if (inline) {
     inputDir = originalProjectRoot.split('/')[0];
   } else {

packages/react/index.ts

@@ -1,7 +1,6 @@
 import { NxReactWebpackPlugin as _NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';
 
-// TODO(v21): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
+/** @deprecated Use '@nx/react/webpack-plugin' instead, which can improve graph creation by 150-200ms per file. */
-/** @deprecated Use '@nx/react/webpack-plugin' instead. */
 export const NxReactWebpackPlugin = _NxReactWebpackPlugin;
 
 export {

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

@@ -283,7 +283,7 @@ function buildTargetWebpack(
 
   return async () => {
     customWebpack = await customWebpack;
-    // TODO(v21): Component testing need to be agnostic of the underlying executor. With Crystal, we're not using `@nx/webpack:webpack` by default.
+    // TODO(v22): 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

packages/webpack/index.ts

@@ -14,8 +14,7 @@ export {
 /** @deprecated Use `configurationGenerator` instead. */
 export const webpackProjectGenerator = configurationGenerator;
 
-// TODO(v21): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
+/** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead, which can improve graph creation by 150-200ms per file. */
-/** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead. */
 export const NxWebpackPlugin = NxAppWebpackPlugin;
 /** @deprecated Use NxTsconfigPathsWebpackPlugin from `@nx/webpack/tsconfig-paths-plugin` instead. */
 export const NxTsconfigPathsWebpackPlugin = _NxTsconfigPathsWebpackPlugin;