[Bug]: Multiple identical SVGs generated with different hash

[mmazzarolo]

Version

System:
    OS: macOS 15.1.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 276.56 MB / 36.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Browsers:
    Brave Browser: 131.1.73.104
    Chrome: 132.0.6834.110
    Safari: 18.1.1
  npmPackages:
    @rsbuild/core: ^1.1.0 => 1.1.0
    @rsbuild/plugin-react: ^1.1.0 => 1.1.0
    @rsbuild/plugin-svgr: ^1.0.4 => 1.0.4

Details

Long time no see! Hello team.
After upgrading from @rsbuild/core@1.0.19 to @rsbuild/core@1.2.2 our build process started creating duplicate SVGs with the same content but different contenthash. By trying different versions, I was able to pinpoint that the issue was introduced in @rsbuild/core@1.1.0.

Our SVG output in @rsbuild/core@1.0.19:

Our SVG output in @rsbuild/core@1.1.0 (notice multiple app.v0.Activity.[HASH].svg, etc.):

See for example the duplicate app.v0.Activity.[HASH].svg. In both cases, the content is identical:

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2007_3455)">
<path d="M13.96 13.07C15.14 11.68 15.86 9.89 15.86 7.93C15.86 5.97 15.14 4.18 13.96 2.79C13.96 2.79 13.93 2.75 13.91 2.74C12.46 1.07 10.32 0 7.93 0C5.54 0 3.46 1.04 2 2.68C1.96 2.71 1.93 2.74 1.9 2.79C0.72 4.18 0 5.97 0 7.93C0 9.89 0.72 11.68 1.9 13.07C1.9 13.07 1.91 13.08 1.92 13.09C3.38 14.78 5.53 15.86 7.93 15.86C10.33 15.86 12.5 14.78 13.95 13.07H13.96ZM13.43 12.13C12.83 11.69 12.32 11.13 11.96 10.48C11.52 9.7 11.29 8.82 11.29 7.93C11.29 7.04 11.52 6.15 11.96 5.38C12.32 4.73 12.83 4.17 13.43 3.73C14.32 4.9 14.86 6.35 14.86 7.93C14.86 9.51 14.32 10.96 13.43 12.13ZM4.77 4.89C4.35 4.14 3.77 3.5 3.09 2.98C4.23 1.87 5.74 1.15 7.43 1.03V14.83C5.75 14.71 4.23 13.99 3.09 12.88C3.77 12.36 4.35 11.72 4.77 10.97C5.29 10.04 5.57 8.99 5.57 7.93C5.57 6.87 5.29 5.81 4.77 4.89ZM8.42 1.03C10.1 1.15 11.62 1.87 12.76 2.98C12.08 3.5 11.5 4.14 11.08 4.89C10.56 5.82 10.28 6.87 10.28 7.93C10.28 8.99 10.56 10.05 11.08 10.97C11.5 11.72 12.08 12.36 12.76 12.88C11.62 13.99 10.11 14.71 8.42 14.83V1.03ZM2.43 3.73C3.03 4.17 3.54 4.73 3.9 5.38C4.34 6.16 4.57 7.04 4.57 7.93C4.57 8.82 4.34 9.71 3.9 10.48C3.54 11.13 3.03 11.69 2.43 12.13C1.54 10.96 1 9.51 1 7.93C1 6.35 1.54 4.9 2.43 3.73Z" fill="currentColor" fill-opacity="0.96"/>
</g>
<defs>
<clipPath id="clip0_2007_3455">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

Verified via CLI:

» sha256sum app.v0.Activity.323ed88c.svg 
11fad6824f7b8a326827f49669f80dbc502474b2ebeabd9e431e4ba2cfd5be14  app.v0.Activity.323ed88c.svg

» sha256sum app.v0.Activity.cda9701b.svg 
11fad6824f7b8a326827f49669f80dbc502474b2ebeabd9e431e4ba2cfd5be14  app.v0.Activity.cda9701b.svg

We tried updating the various plugins, manually changing various setting (like the contenthash setting it to [contenthash:16] for example), and more, but with no success.

Both SVGs are used across generated JS files.

Stripped down version of the config that still has the issue:

import { pluginReact } from "@rsbuild/plugin-react";
import { pluginSvgr } from "@rsbuild/plugin-svgr";

import type { RsbuildConfig } from "@rsbuild/core";

const APP_PORT = 3000;

const config: RsbuildConfig = {
  source: {
    entry: {
      index: "./src/index",
    },
  },
  output: {
    distPath: {
      root: "build",
    },
  },
  html: {
    template: "./public/index.html",
  },
  server: {
    port: APP_PORT,
  },
  tools: {
    swc: {
      exclude: [".*\\.test\\.ts$", ".*\\.test\\.tsx$"],
      jsc: {
        parser: {
          syntax: "typescript",
          decorators: true,
        },
        experimental: {
          plugins: [
            [
              "@swc/plugin-emotion",
              {
                autoLabel:
                  process.env.NODE_ENV === "development" ? "always" : "never",
                sourceMap: process.env.NODE_ENV === "development",
                labelFormat: "[filename]__[local]",
              },
            ],
          ],
        },
      },
    },
  },
  plugins: [
    pluginReact({
      swcReactOptions: {
        importSource: "@emotion/react",
        runtime: "automatic",
      },
    }),
    pluginSvgr({
      mixedImport: true,
      svgrOptions: { prettier: false, svgo: false, titleProp: true, ref: true },
    }),
  ],
};

export default config;

Reproduce link

No repro (yet)

Reproduce Steps

It's hard for us to identify what's causing it, so we don't have a minimal reproduction yet. Any idea on what might be triggering this or that has been introduced that could cause this? Happy to create a repro if I can find a way to isolate the issue. Thanks!

[chenjiahan]

Thank you for your feedback. If there is a reproduction repo that would be helpful.

I looked at the changes in v1.1.0, web-infra-dev/rspack#8303 may be related to this issue, @ahabhgk can you take a look?

[mmazzarolo]

Just tried again, but I'm not able to create a minimal repro :/ Will try to slim down our app as much as possible to see if I can get closer to the issue.

[mmazzarolo]

Ha! I might have found something interesting. @chenjiahan , @ahabhgk
We have a bit of code that imports SVGs dynamically (just discovered it):

const iconModule = await import(`my-app/icons/${options.sourceFolder}/${iconName}.svg`);

Temporarily removing this makes the duplicate icons disappear.

I was able to reproduce it here: https://codesandbox.io/p/github/rspack-contrib/rsbuild-codesandbox-example/csb-4xtsz4/draft/inspiring-microservice?file=%2Fsrc%2FApp.jsx%3A3%2C1 where I load the same icon twice (statically and dynamically):

import "./App.css";
import { ReactComponent as Add } from "./Add.svg";

const App = () => {
  useEffect(() => {
    const iconName = "Add";
    import(`./${iconName}.svg`).then((x) => console.log("x", x));
  }, []);
  return (
    <div className="content">
      <h1>Rsbuild with React</h1>
      <Add />
      <Test />
      <p>Start building amazing things with Rsbuild.</p>
    </div>
  );
};

export default App;

Running the build will show that the icon is being generated twice (with different hash):

I guess that the fact that an SVG (or an asset, really) is imported dynamically influences the hashing logic?

[ahabhgk]

When using mixedImport: true rsbuild will use ["@svgr/webpack", "url-loader"] to transform import { ReactComponent as Add } from "./Add.svg";, and use type: "asset" to transform import(./${iconName}.svg), but url-loader is not using the same hashFunction with type: "asset" to compute the hash, url-loader is using md4, but type: "asset" is using xxhash64 (output.hashFunction = "xxhash64")

cc @chenjiahan

[chenjiahan]

@ahabhgk Got it. I will try to change the hash function of url-loader to xxhash64.