fix(plugin-svgr): SVGs generated with different hash (#5016)

Author: chenjiahan

e2e/cases/svg/svgr-hash-digest/index.test.ts

@@ -0,0 +1,20 @@
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+// https://github.com/web-infra-dev/rsbuild/issues/4610
+test('should generate the same hash digest for the same SVG', async ({
+  page,
+}) => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    page,
+  });
+
+  const files = await rsbuild.unwrapOutputJSON();
+
+  expect(
+    Object.keys(files).filter((key) => key.endsWith('.svg')).length,
+  ).toEqual(1);
+
+  await rsbuild.close();
+});

e2e/cases/svg/svgr-hash-digest/rsbuild.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSvgr } from '@rsbuild/plugin-svgr';
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    pluginSvgr({
+      mixedImport: true,
+    }),
+  ],
+  output: {
+    dataUriLimit: 0,
+  },
+});

e2e/cases/svg/svgr-hash-digest/src/index.js

@@ -0,0 +1,4 @@
+import svg1 from '@assets/circle.svg';
+import svg2 from '@assets/circle.svg?url';
+
+console.log(svg1, svg2);

package.json

@@ -13,7 +13,7 @@
     "build:doc": "cd website && pnpm run build",
     "change": "changeset",
     "changeset": "changeset",
-    "check-dependency-version": "pnpx check-dependency-version-consistency .",
+    "check-dependency-version": "pnpx check-dependency-version-consistency . --ignore-dep loader-utils",
     "check-spell": "pnpx cspell && heading-case",
     "dev:doc": "cd website && pnpm run dev",
     "e2e": "cd ./e2e && pnpm test",
@@ -62,7 +62,9 @@
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "url-loader": "patches/[email protected]",
+      "file-loader": "patches/[email protected]"
     }
   }
 }

packages/plugin-svgr/package.json

@@ -33,7 +33,7 @@
     "@svgr/plugin-jsx": "8.1.0",
     "@svgr/plugin-svgo": "8.1.0",
     "deepmerge": "^4.3.1",
-    "loader-utils": "^2.0.4"
+    "loader-utils": "^3.3.1"
   },
   "devDependencies": {
     "@rsbuild/core": "workspace:*",

packages/plugin-svgr/prebundle.config.mjs

@@ -2,13 +2,6 @@
 import { readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 
-// The package size of `schema-utils` is large, and validate has a performance overhead of tens of ms.
-// So we skip the validation and let TypeScript to ensure type safety.
-const writeEmptySchemaUtils = (task) => {
-  const schemaUtilsPath = join(task.distPath, 'schema-utils.js');
-  writeFileSync(schemaUtilsPath, 'module.exports.validate = () => {};');
-};
-
 /** @type {import('prebundle').Config} */
 export default {
   prettier: true,
@@ -17,28 +10,22 @@ export default {
       name: 'file-loader',
       ignoreDts: true,
       externals: {
-        'schema-utils': './schema-utils',
         'loader-utils': 'loader-utils',
       },
-      afterBundle: writeEmptySchemaUtils,
     },
     {
       name: 'url-loader',
       ignoreDts: true,
       externals: {
-        'schema-utils': './schema-utils',
         'loader-utils': 'loader-utils',
       },
       afterBundle(task) {
-        writeEmptySchemaUtils(task);
-
         const filePath = join(task.distPath, 'index.js');
         const content = readFileSync(filePath, 'utf-8');
         const newContent = content.replace(
           /['"]file-loader['"]/,
           'require.resolve("../file-loader")',
         );
-
         if (newContent !== content) {
           writeFileSync(filePath, newContent);
         }

patches/[email protected]

@@ -0,0 +1,29 @@
+diff --git a/CHANGELOG.md b/CHANGELOG.md
+deleted file mode 100644
+index 1390102e57cacd2f334ccd8992bea23d40817b88..0000000000000000000000000000000000000000
+diff --git a/dist/index.js b/dist/index.js
+index ec5d5b0eda115042642d64b8873021db24aba9f3..939d5bf423dd831c268bfa0f581e2c598a455b2f 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -10,20 +10,12 @@ var _path = _interopRequireDefault(require("path"));
+ 
+ var _loaderUtils = require("loader-utils");
+ 
+-var _schemaUtils = require("schema-utils");
+-
+-var _options = _interopRequireDefault(require("./options.json"));
+-
+ var _utils = require("./utils");
+ 
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ 
+ function loader(content) {
+-  const options = (0, _loaderUtils.getOptions)(this);
+-  (0, _schemaUtils.validate)(_options.default, options, {
+-    name: 'File Loader',
+-    baseDataPath: 'options'
+-  });
++  const options = this.getOptions() || {};
+   const context = options.context || this.rootContext;
+   const name = options.name || '[contenthash].[ext]';
+   const url = (0, _loaderUtils.interpolateName)(this, name, {

patches/[email protected]

@@ -0,0 +1,37 @@
+diff --git a/CHANGELOG.md b/CHANGELOG.md
+deleted file mode 100644
+index 768f7f35c56f282c7c0cda7a4c1c5e7e0b113560..0000000000000000000000000000000000000000
+diff --git a/dist/index.js b/dist/index.js
+index 7d977a6ece276d360bcb857cad9950252353da46..a2e19ed214a00950b3ea4c27eec7f890ef3e14f8 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -8,16 +8,10 @@ exports.raw = void 0;
+ 
+ var _path = _interopRequireDefault(require("path"));
+ 
+-var _loaderUtils = require("loader-utils");
+-
+-var _schemaUtils = require("schema-utils");
+-
+ var _mimeTypes = _interopRequireDefault(require("mime-types"));
+ 
+ var _normalizeFallback = _interopRequireDefault(require("./utils/normalizeFallback"));
+ 
+-var _options = _interopRequireDefault(require("./options.json"));
+-
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ 
+ function shouldTransform(limit, size) {
+@@ -87,11 +81,7 @@ function getEncodedData(generator, mimetype, encoding, content, resourcePath) {
+ 
+ function loader(content) {
+   // Loader Options
+-  const options = (0, _loaderUtils.getOptions)(this) || {};
+-  (0, _schemaUtils.validate)(_options.default, options, {
+-    name: 'URL Loader',
+-    baseDataPath: 'options'
+-  }); // No limit or within the specified limit
++  const options = this.getOptions() || {};
+ 
+   if (shouldTransform(options.limit, content.length)) {
+     const {