[Bug]: can't dynamic import svg from template string variable with @rsbuild/plugin-svgr

[zhylmzr]

Version

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1
    Memory: 845.17 MB / 16.00 GB
    Shell: 3.7.0 - /opt/homebrew/bin/fish
  Browsers:
    Brave Browser: 122.1.63.161
    Chrome: 118.0.5993.96
    Safari: 17.3.1
  npmPackages:
    @rsbuild/core: ^0.4.11 => 0.4.11
    @rsbuild/plugin-react: ^0.4.11 => 0.4.11
    @rsbuild/plugin-svgr: ^0.4.11 => 0.4.11

Details

const App = () => {
    useEffect(() => {
        const load = async () => {
            const name = 'react'
            const icon1 = (await import(`./assets/${name}.svg`)).ReactComponent
            console.log(icon1) // undefined

            const icon2 = (await import(`./assets/react.svg`)).ReactComponent
            console.log(icon2) // work fine
        }
        load()
    }, [])

    return <div></div>
}

Reproduce link

https://github.com/zhylmzr/rsbuild-demo

Reproduce Steps

clone the git repository and bun i && bun dev

[chenjiahan]

This may be a bug of the Rspack rule matching, I will transfer this issue to the Rspack repo for follow up.

[chenjiahan]

The SVGR rule uses issuer to match the files, but issuer do not support dynamic import with template string variable yet (for this, webpack and rspack are the same).

We'll try to figure out a way to match this.

[chenjiahan]

Related issue: webpack/webpack#9309

[zhylmzr]

In webpack, i can specifying the loader to bypass it ( example ):

async function load() {
    const name = 'react'

    // not work
    // const A1 = await import(`./assets/${name}.svg`)
    // console.log(A1)

    // work, specify to use the svgr loader
    const A2 = await import(`@svgr/webpack!./assets/${name}.svg`)
    console.log(A2)
}

load()

I tried installing @svgr/webpack and specifying it in rsbuild, but the DataURI still being generated. I found that the build did generate the SVG Component via svgr, but somehow the result was discarded.

[chenjiahan]

Rsbuild supports the ?react in the latest version and can solve this issue:

const icon1 = await import(`./assets/${name}.svg?react`);

see: https://rsbuild.dev/plugins/list/plugin-svgr#example

[zhylmzr]

Rsbuild supports the ?react in the latest version and can solve this issue:

const icon1 = await import(`./assets/${name}.svg?react`);

see: https://rsbuild.dev/plugins/list/plugin-svgr#example

I get the error Error: Cannot find module './assets/react.svg' in @rsbuild/plugin-svgr v0.4.14.

[chenjiahan]

Can you provide a reproduction repo for this?

[zhylmzr]

https://github.com/zhylmzr/rsbuild-demo

[chenjiahan]

This might be a bug of Rspack:

• can match the resourceQuery: /react/:

const icon = await import(`./${name}.svg?react`)

• can not match the resourceQuery: /react/:

const icon = await import(`./assets/${name}.svg?react`)

[chenjiahan]

@LingyuCoder can you take a look? ❤️

[LingyuCoder]

There is a bug in context module dependency code generation, I will try to fix it

[LingyuCoder]

Had been fixed, you can try rspack 0.5.9

[chenjiahan]

Nice 👍 I will release a new Rsbuild version today, which is based on Rspack v0.5.9

[chenjiahan]

Released