fix: failed to disable emitAssets when using SVGR (#2136)

Author: chenjiahan

e2e/cases/svg/svgr-disable-emit-asset/index.test.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test';
+import { build, gotoPage } from '@e2e/helper';
+
+test('should import svg with SVGR plugin and query URL correctly', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+
+  const files = await rsbuild.unwrapOutputJSON();
+  const filenames = Object.keys(files);
+
+  expect(
+    filenames.some((filename) =>
+      filename.includes('dist/static/svg/mobile.svg'),
+    ),
+  ).toBeFalsy();
+});

e2e/cases/svg/svgr-disable-emit-asset/rsbuild.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSvgr } from '@rsbuild/plugin-svgr';
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    pluginSvgr({
+      svgrOptions: {
+        exportType: 'default',
+      },
+    }),
+  ],
+  output: {
+    filenameHash: false,
+    emitAssets: () => false,
+  },
+});

e2e/cases/svg/svgr-disable-emit-asset/src/index.js

@@ -0,0 +1,3 @@
+import svgImg from '@assets/mobile.svg?url';
+
+console.log(svgImg);

packages/plugin-svgr/src/index.ts

@@ -75,8 +75,18 @@ export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({
       const maxSize =
         typeof dataUriLimit === 'number' ? dataUriLimit : dataUriLimit.svg;
 
-      // delete Rsbuild builtin SVG rules
-      chain.module.rules.delete(CHAIN_ID.RULE.SVG);
+      let generatorOptions: Rspack.GeneratorOptionsByModuleType['asset/resource'] =
+        {};
+
+      if (chain.module.rules.has(CHAIN_ID.RULE.SVG)) {
+        generatorOptions = chain.module.rules
+          .get(CHAIN_ID.RULE.SVG)
+          .oneOfs.get(CHAIN_ID.ONE_OF.SVG_URL)
+          .get('generator');
+
+        // delete Rsbuild builtin SVG rules
+        chain.module.rules.delete(CHAIN_ID.RULE.SVG);
+      }
 
       const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX);
 
@@ -93,9 +103,7 @@ export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({
         .oneOf(CHAIN_ID.ONE_OF.SVG_URL)
         .type('asset/resource')
         .resourceQuery(/(__inline=false|url)/)
-        .set('generator', {
-          filename: outputName,
-        });
+        .set('generator', generatorOptions);
 
       // force to inline: "foo.svg?inline"
       rule
@@ -169,9 +177,7 @@ export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({
             maxSize,
           },
         })
-        .set('generator', {
-          filename: outputName,
-        });
+        .set('generator', generatorOptions);
 
       // apply current JS transform rule to SVGR rules
       const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);