fix(plugin-svgr): failed to reuse SWC react options (#1263)

web-infra-dev · Jan 12, 2024 · b0a48d4 · b0a48d4
1 parent 3161152
commit b0a48d4
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/packages/plugin-svgr/package.json b/packages/plugin-svgr/package.json
@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@rsbuild/core": "workspace:*",
+    "@rsbuild/plugin-react": "workspace:*",
     "@scripts/test-helper": "workspace:*",
     "@types/node": "16.x",
     "typescript": "^5.3.0"

diff --git a/packages/plugin-svgr/src/index.ts b/packages/plugin-svgr/src/index.ts
@@ -47,7 +47,13 @@ function getSvgoDefaultConfig() {
 export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({
   name: 'rsbuild:svgr',
 
-  pre: ['rsbuild:babel', 'uni-builder:babel', 'rsbuild-webpack:swc'],
+  pre: [
+    // SVGR needs to reuse the SWC loader options with react config
+    'rsbuild:react',
+    'rsbuild:babel',
+    'uni-builder:babel',
+    'rsbuild-webpack:swc',
+  ],
 
   setup(api) {
     api.modifyBundlerChain(async (chain, { isProd, CHAIN_ID }) => {

diff --git a/packages/plugin-svgr/tests/__snapshots__/index.test.ts.snap b/packages/plugin-svgr/tests/__snapshots__/index.test.ts.snap
@@ -83,6 +83,11 @@ exports[`svgr > 'configure SVGR options' 1`] = `
               "transform": {
                 "decoratorMetadata": true,
                 "legacyDecorator": true,
+                "react": {
+                  "development": true,
+                  "refresh": true,
+                  "runtime": "automatic",
+                },
               },
             },
             "sourceMaps": true,
@@ -205,6 +210,11 @@ exports[`svgr > 'export default Component' 1`] = `
               "transform": {
                 "decoratorMetadata": true,
                 "legacyDecorator": true,
+                "react": {
+                  "development": true,
+                  "refresh": true,
+                  "runtime": "automatic",
+                },
               },
             },
             "sourceMaps": true,
@@ -319,6 +329,11 @@ exports[`svgr > 'export default url' 1`] = `
               "transform": {
                 "decoratorMetadata": true,
                 "legacyDecorator": true,
+                "react": {
+                  "development": true,
+                  "refresh": true,
+                  "runtime": "automatic",
+                },
               },
             },
             "sourceMaps": true,

diff --git a/packages/plugin-svgr/tests/index.test.ts b/packages/plugin-svgr/tests/index.test.ts
@@ -1,6 +1,7 @@
-import { expect, describe, it, test } from 'vitest';
+import { expect, describe, it } from 'vitest';
 import { type PluginSvgrOptions, pluginSvgr } from '../src';
 import { createStubRsbuild } from '@scripts/test-helper';
+import { pluginReact } from '@rsbuild/plugin-react';
 import { SVG_REGEX } from '@rsbuild/shared';
 
 describe('svgr', () => {
@@ -32,7 +33,7 @@ describe('svgr', () => {
       rsbuildConfig: {},
     });
 
-    rsbuild.addPlugins([pluginSvgr(item.pluginConfig)]);
+    rsbuild.addPlugins([pluginSvgr(item.pluginConfig), pluginReact()]);
 
     const config = await rsbuild.unwrapConfig();
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml