Hello! Sorry if it's the wrong place to ask this question.. I'm trying to use @svgr/webpack loader i...

# javascript

[Ilya]

Hello! Sorry if it's the wrong place to ask this question..
I'm trying to use @svgr/webpack loader in 1.3.70 - what is done:
1) added to _webpack.config.d_:

config.resolve.modules.push("processedResources/Js/main");
config.module.rules.push(
    {
        test: /\.svg$/,
        use: ['@svgr/webpack']
    }
);

2) included in build.gradle.kts

dependencies {
    ..
    implementation(npm("@svgr/webpack", "5.2.0"))
}

3) placed all svg's into resources/svg/...
4) import it in kotlin like @JsModule("svg/file.svg")
5) then when i run gradle browserDevelopmentWebpack I get for every svg:

ERROR in .../build/processedResources/Js/main/img/svg/file.svg
Module not found: Error: Can't resolve 'react' in ...

Can somebody please point at what is wrong?

[Ivan Kubyshkin [JetBrains]]

Can you attach a link to your project?

[Ilya]

i'll try to create minimal repo and reply here a bit later.. thanks!

[Ilya]

Here it goes
https://github.com/sunduev/kotlin-react-svg

[Ilya Goncharov [JB]]

@Ilya Hi!
Sorry for delay
So the main problem is that unfortunately now we don’t include resources to webpack build, so you need additional “hacks” for this. And AFAIK svgr produces react components from svg, and after it process svg file, it produces js file with require('react') inside
So when webpack further process this intemediate js file it tries to require react with resolve.modules and logically it should be found in js/node_modules, but this directory is not parent for processedResources , so that’s why webpack couldn’t find anything. WA is manually add absolute path to node_modules
Add this to resolve.js

config.resolve.modules.push(require("path").resolve(__dirname, "../../node_modules"));

[Ilya]

Thanks! It worked, updated repo in case anyone needs it..