[Bug]: SVG parse failed - JavaScript parsing error: Expected ';', '}' or <eof>

[busy-mango]

System Info

OS: macOS 14.6.1
CPU: (8) Intel Core i9
Memory: 32.00 GB
Shell: 5.9 - /bin/zsh 外壳：5.9 - /bin/zsh
Node: 21.5.0 - /opt/homebrew/bin/node
pnpm: 8.15.9

Details

I'm trying to upgrade from @rspack/core from 1.1.4 to 1.1.5, and everything is working fine except that the SVG files are accidentally employing hits to the JS parsing rules. I can't see anything about this in the issue, documentation, or CHANGLOG.

Reproduce link

https://github.com/busy-mango/react-app/tree/demo/rspack-svg-build-bug

Reproduce Steps

clone the repo
pnpm i && pnpm dev

[LingyuCoder]

Test in webpack and meet the same error.

This is caused by the dynamic import context dependencies in your utils/import.ts:

export function iconAsync(route: string) {
  return import(`../icons${route}`) as Promise<ReactComponentAsync>;
}

This dynamic import will generate a context module which has react-app/src|lazy|/^\.\/icons.*$/|groupOptions: {}|namespace object as its identifier. And this module will be the issuer of the svg modules.

But the rule in the module.rules need to check the issuer like this:

export const SVGRule: RuleSetRule = {
  test: /\.svg$/i,
  issuer: /\.[jt]sx?/,    // delete this line, it will be alright
  use: '@svgr/webpack',
  options: { icon: false, typescript: true },
};

So the issuer can not pass this check and the rule should not be applied. Perhaps you can just remove the issuer check or rewrite the regex to match react-apps/src