Cannot find module '@svgr/webpack?-svgo,+titleProp,+ref!../../assets/svgs/AppleDownload.svg'

[jweb89]

Been trying to debug this for the past few days but can't figure it out. We are using the latest versions of Razzle and Razzle dev utils (4.0.4). It was working correctly before we upgraded razzle. Not sure what is causing this issue, maybe you can help. We are using the 2.0.0 version of this package and 5.5.0 of @svgr/webpack.

import { ReactComponent as Apple } from "../../assets/svgs/AppleDownload.svg"; <Apple /> Cannot find module "@svgr/webpack?-svgo,+titleProp,+ref!../../assets/svgs/AppleDownload.svg"

Razzle 4.0.4 Razzle-dev-utils 4.0.4 webpack 4.46.0 @svgr/webpack 5.5.0 razzle-plugin-svg-react-component 2.0.0

Thanks!

[finmavis]

Hi thank you for reporting this, may I know the razzle plugin you used? Are you using typescript? and if yes, May I know which one you used, is it typescript template or using typescript plugin?

[jweb89]

We are not using typescript. The only other plugin we are using is razzle-plugin-scss which is version 4.0.4

[finmavis]

Currently, I've no idea, I just tested on my razzle project which used Razzle 3, and update it to the latest version, and it works,

My step was:

1. Remove the cache folder
2. Used official upgrade guide here
3. Update this plugin and add the @svgr/webpack dependencies
4. It works,

Am I missing some info? CMIIW,

Edit: May I ask to set up a minimal repo to reproduce the error that occurred, so that I could take a look and debug it,

[jweb89]

Hmmm it's running in a monorepo using lerna but that shouldn't make a difference, however I tried it outside of the lerna and it seemed to work fine. Any idea what would be the issue? I can work on getting a minimal repo if you want to try to debug with that.

Thanks!

[finmavis]

Ah yes, it does break on monorepo using yarn workspace and lerna, hemmm, currently I've no idea,

[jweb89]

I think it's some sort of issue with the babel loader. I think some extra config needs to be done on the root babelrc. I'll play around with it. If I come up with a solution I will post it here so you can help anyone who has this issue in the future

[finmavis]

Hey, sorry for a bit late reply, I think I might know the cause, just need a bit testing for a various setup,

[jweb89]

No worries. I was able to add this to not hoist the module "command":{ "bootstrap":{ "nohoist":[ "cypress*", "@svgr/*" ] } },

to get it working for now. Obviously this isn't ideal so if you need me to test anything just let me know!

[finmavis]

Would you mind trying the next version?

1. Remove @svgr/webpack
2. Install razzle-plugin-svg-react-component@next

I've already tested it, but just to be sure. If this solved the problem, then I will publish the new version. Thank you!

[jweb89]

Yes! I will try to test it out tomorrow and let you know. Thanks!

[jweb89]

Hey, I'm still getting the same issue with the new version. In the mean time to get it working I've just not hoisted that node module and it works fine