miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source 
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 #
This commit is contained in:
Jack Hsu 2025-04-29 08:44:21 -04:00 committed by GitHub
parent cf4a1f35e9
commit 9234fb30a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 28 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/shared/packages/next/next-config-setup.md
View File

@ -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
// See: https://github.com/gregberge/svgr
svgr: false,
svgr: true,
babelUpwardRootMode: true,
},
// Add Next.js configuration here
};

2
docs/shared/packages/webpack/webpack-plugins.md
View File

@ -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

26
packages/next/plugins/with-nx.ts
View File

@ -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.
* It is best to configure SVGR manually with the `@svgr/webpack` loader.
* We will remove this option in Nx 21.
* @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;
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.
// 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';
// TODO(v22): Remove SVGR support
config.module.rules.push({
test: /\.svg$/,
issuer: { not: /\.(css|scss|sass)$/ },

8
packages/next/src/generators/application/application.spec.ts
View File

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

24
packages/next/src/generators/application/files/common/next.config.js__tmpl__
View File

@ -12,11 +12,9 @@ const { withLess } = require('@nx/next/plugins/with-less');
* @type {import('@nx/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
nx: {
// Set this to true if you would like to to use SVGR
// See: https://github.com/gregberge/svgr
svgr: false,
},
// Use this to set Nx-specific options
// See: https://nx.dev/recipes/next/next-config-setup
nx: {},
};
const plugins = [
@ -36,11 +34,9 @@ module.exports = composePlugins(...plugins)(nextConfig);
* @type {import('@nx/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
nx: {
// Set this to true if you would like to to use SVGR
// See: https://github.com/gregberge/svgr
svgr: false,
},
// Use this to set Nx-specific options
// See: https://nx.dev/recipes/next/next-config-setup
nx: {},
<% 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: {
// Set this to true if you would like to use SVGR
// See: https://github.com/gregberge/svgr
svgr: false,
},
// Use this to set Nx-specific options
// See: https://nx.dev/recipes/next/next-config-setup
nx: {},
};
const plugins = [

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

@ -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?$/,

4
packages/react/plugins/with-react.ts
View File

@ -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;
}

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

@ -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$/,