feat(react): undeprecate svgr option for Next.js apps since --turbo supports it (#30909)

This PR delays deprecation of `svgr` for `@nx/next`, as Turbopack
supports it now.

This PR also deprecates all SVGR support for v22. It is not a well-used
feature, and the webpack plugin is not maintained. We'll ensure in v22
to add the SVGR webpack plugin to userland configs, but we'll not
maintain it ourselves moving forward.

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

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

@@ -16,7 +16,7 @@ understand workspace libraries, and other Nx-specific features. See below for an
 module.exports = withNx({
   // Nx configuration goes here
   nx: {
-    svgr: false,
+    babelUpwardRootMode: true,
   },
   // Add Next.js configuration goes here
 });
@@ -38,7 +38,9 @@ The `withNx` Next.js plugin provides integration with Nx, including support for
 
 Type: `boolean`
 
-Set this to true if you would like to to use SVGR. See: https://react-svgr.com/
+Set this to true if you would like to use SVGR. See: https://react-svgr.com/
+
+**Deprecated:** Configure SVGR support in your `next.config.js` file without Nx. This option will be removed in Nx 22. See: https://react-svgr.com/docs/next/
 
 #### babelUpwardRootMode
 
@@ -60,9 +62,8 @@ const { composePlugins, withNx } = require('@nx/next');
  **/
 const nextConfig = {
   nx: {
-    // Set this to true if you would like to to use SVGR
+    svgr: true,
-    // See: https://github.com/gregberge/svgr
+    babelUpwardRootMode: true,
-    svgr: false,
   },
   // Add Next.js configuration here
 };

docs/shared/packages/webpack/webpack-plugins.md

@@ -347,6 +347,8 @@ Type: `boolean`
 
 Enables or disables [React SVGR](https://react-svgr.com/). Default is `true`.
 
+**Deprecated:** Add SVGR support in your Webpack configuration without relying on Nx. This option will be removed in Nx 22. See https://react-svgr.com/docs/webpack/
+
 #### Example
 
 ```js

packages/next/plugins/with-nx.ts

@@ -22,9 +22,8 @@ export interface SvgrOptions {
 export interface WithNxOptions extends NextConfig {
   nx?: {
     /**
-     * @deprecated Next.js via turbo conflicts with how webpack handles the import of SVGs.
+     * @deprecated Add SVGR support in your Webpack configuration without relying on Nx. See https://react-svgr.com/docs/webpack/
-     * It is best to configure SVGR manually with the `@svgr/webpack` loader.
+     * TODO(v22): Remove this option and migrate userland webpack config to explicitly configure @svgr/webpack
-     * We will remove this option in Nx 21.
      * */
     svgr?: boolean | SvgrOptions;
     babelUpwardRootMode?: boolean;
@@ -374,26 +373,7 @@ export function getNextConfig(
 
         const svgrOptions =
           typeof nx?.svgr === 'object' ? nx.svgr : defaultSvgrOptions;
-        // TODO(v21): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
+        // TODO(v22): Remove SVGR support
-        // It should be:
-        // use: [{
-        //   test: /\.svg$/i,
-        //   type: 'asset',
-        //   resourceQuery: /react/, // *.svg?react
-        // },
-        // {
-        //   test: /\.svg$/i,
-        //   issuer: /\.[jt]sx?$/,
-        //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
-        //   use: ['@svgr/webpack'],
-        // }],
-        // See:
-        // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
-        // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
-        // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
-        // Note: We also need a migration for any projects that are using SVGR to convert
-        //       `import { ReactComponent as X } from './x.svg` to
-        //       `import X from './x.svg?react';
         config.module.rules.push({
           test: /\.svg$/,
           issuer: { not: /\.(css|scss|sass)$/ },

packages/next/src/generators/application/application.spec.ts

@@ -523,11 +523,9 @@ describe('app', () => {
        * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
        **/
       const nextConfig = {
-        nx: {
+        // Use this to set Nx-specific options
-          // Set this to true if you would like to use SVGR
+        // See: https://nx.dev/recipes/next/next-config-setup
-          // See: https://github.com/gregberge/svgr
+        nx: {},
-          svgr: false,
-        },
       };
 
       const plugins = [

packages/next/src/generators/application/files/common/next.config.js__tmpl__

@@ -12,11 +12,9 @@ const { withLess } = require('@nx/next/plugins/with-less');
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
-  nx: {
+  // Use this to set Nx-specific options
-    // Set this to true if you would like to to use SVGR
+  // See: https://nx.dev/recipes/next/next-config-setup
-    // See: https://github.com/gregberge/svgr
+  nx: {},
-    svgr: false,
-  },
 };
 
 const plugins = [
@@ -36,11 +34,9 @@ module.exports = composePlugins(...plugins)(nextConfig);
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
-  nx: {
+  // Use this to set Nx-specific options
-    // Set this to true if you would like to to use SVGR
+  // See: https://nx.dev/recipes/next/next-config-setup
-    // See: https://github.com/gregberge/svgr
+  nx: {},
-    svgr: false,
-  },
   <% if (style === 'styled-components') { %>
   compiler: {
     // For other options, see https://styled-components.com/docs/tooling#babel-plugin
@@ -66,11 +62,9 @@ module.exports = composePlugins(...plugins)(nextConfig);
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
-  nx: {
+  // Use this to set Nx-specific options
-    // Set this to true if you would like to use SVGR
+  // See: https://nx.dev/recipes/next/next-config-setup
-    // See: https://github.com/gregberge/svgr
+  nx: {},
-    svgr: false,
-  },
 };
 
 const plugins = [

packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts

@@ -21,26 +21,6 @@ export function applyReactConfig(
     const svgrOptions =
       typeof options.svgr === 'object' ? options.svgr : defaultSvgrOptions;
 
-    // TODO(v21): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
-    // It should be:
-    // use: [{
-    //   test: /\.svg$/i,
-    //   type: 'asset',
-    //   resourceQuery: /react/, // *.svg?react
-    // },
-    // {
-    //   test: /\.svg$/i,
-    //   issuer: /\.[jt]sx?$/,
-    //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
-    //   use: ['@svgr/webpack'],
-    // }],
-    // See:
-    // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
-    // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
-    // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
-    // Note: We also need a migration for any projects that are using SVGR to convert
-    //       `import { ReactComponent as X } from './x.svg` to
-    //       `import X from './x.svg?react';
     config.module.rules.push({
       test: /\.svg$/,
       issuer: /\.(js|ts|md)x?$/,

packages/react/plugins/with-react.ts

@@ -10,6 +10,10 @@ export interface SvgrOptions {
   ref?: boolean;
 }
 export interface WithReactOptions extends WithWebOptions {
+  /**
+   * @deprecated Add SVGR support in your Webpack configuration without relying on Nx. See https://react-svgr.com/docs/webpack/
+   * TODO(v22): Remove this option and migrate userland webpack config to explicitly configure @svgr/webpack
+   * */
   svgr?: boolean | SvgrOptions;
 }
 

packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-web-config.ts

@@ -426,6 +426,7 @@ export function applyWebConfig(
           },
         },
       },
+      // TODO(v22): Remove this but provide a migration in `@nx/react` to add @svgr/webpack in userland webpack config
       // SVG: same as image but we need to separate it so it can be swapped for SVGR in the React plugin.
       {
         test: /\.svg$/,