Module not found: Can't resolve '@svgr/webpack'

[JJ810]

Hello! I am trying to use this library in my Next.js crypto project. And I am getting this error when I install this library.

Module not found: Can't resolve '@svgr/webpack'

Import trace for requested module:
./node_modules/react-crypto-icons/lib/Icon.js
./node_modules/react-crypto-icons/lib/index.js
./src/components/UI/Crypto/FTView.tsx
./src/pages/index.tsx

P.S: I even tried to install @svgr/webpack library but then I get another issue.

[rileystephens28]

Thanks for opening this issue. When creating this library, I did not test it with the Next.js framework. The @svgr/webpack package is a dev dependency for this library and therefore is required for use.

Please provide some more info about your project:

• What version of Next.js are you using?
• What is the error message you get after installing @svgr/webpack?
• Have you setup a custom webpack config?

In the meantime, I found this stack overflow issue that seems similar to the one you are having.

[lucasbara]

Same here, I'm using the latest version of NextJS, and this package doesn't works :(
This is the error:
Module not found: Package path ./?+svgo,+titleProp,+ref is not exported from package C:\Users\Lucas Bara\Documents\Web Development\eleven-app\node_modules@svgr\webpack (see exports field in C:\Users\Lucas Bara\Documents\Web Development\eleven-app\node_modules@svgr\webpack\package.json)

Import trace for requested module:
./node_modules/react-crypto-icons/lib/Icon.js
./node_modules/react-crypto-icons/lib/index.js
./src/components/trending-coins/TrendingCoins.tsx
./src/pages/index.tsx

https://nextjs.org/docs/messages/module-not-found

[ledger32570]

Exactly the same issue here. I'm using NX mono repo with a React app.

[benjgil]

This looks to be an issue with how this library interacts directly with @svgr/webpack, which is essentially a webpack-only package.
Because monorepos (and monorepo-like tools like bit.dev) dont hold all tooling dependencies in the top-level node_modules you get an error when an individual component tries to access tooling-specific packages, as they're only installed as dependencies of the tooling (e.g. with bit.dev that's a dependency of the environment building your components).

Cant work out why installing it directly in the project doesnt work though (as @JJ810 reported above)

[hobadams]

Did anyone manage to get this working with Next.js? I've got the same error as @lucasbara

[scotthconner]

Running into this problem using ReactJS and Vite.

I can install the package (with a required --legacy-peer-deps because I'm using react 18 with vite), but the moment I import the project fails to build.

1:38:01 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/react-crypto-icons/lib/useDynamicSVGImport.js:54:24: ERROR: Could not resolve "!!@svgr/webpack?+svgo,+titleProp,+ref!./assets/default.svg"
    at failureErrorWithLog (/Users/scotthconner/projects/locksmith-app/node_modules/esbuild/lib/main.js:1636:15)
    at /Users/scotthconner/projects/locksmith-app/node_modules/esbuild/lib/main.js:1048:25
    at runOnEndCallbacks (/Users/scotthconner/projects/locksmith-app/node_modules/esbuild/lib/main.js:1471:45)
    at buildResponseToResult (/Users/scotthconner/projects/locksmith-app/node_modules/esbuild/lib/main.js:1046:7)
    at /Users/scotthconner/projects/locksmith-app/node_modules/esbuild/lib/main.js:1058:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (/Users/scotthconner/projects/locksmith-app/node_modules/esbuild/lib/main.js:1057:54)
    at handleRequest (/Users/scotthconner/projects/locksmith-app/node_modules/esbuild/lib/main.js:723:19)
    at handleIncomingPacket (/Users/scotthconner/projects/locksmith-app/node_modules/esbuild/lib/main.js:745:7)
    at Socket.readFromStdout (/Users/scotthconner/projects/locksmith-app/node_modules/esbuild/lib/main.js:673:7)

[telemakhos]

same issue here with plain React + Vite... the problem is that this is a webpack focused lib so it expects a loader

I'd recommend to simple download the assets folder, place it in your repo, and import directly the svgs..

https://github.com/shed3/react-crypto-icons/tree/main/lib/assets