You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Inside my monorepo I have a NextJS project and a shared 'icons' package which is just a folder full of svg files.
Whenever I want to use @svgr/webpack with the below next.config.js, I get an error during building
/** @type {import('next').NextConfig} */constnextConfig={webpack(config){// Grab the existing rule that handles SVG importsconstfileLoaderRule=config.module.rules.find((rule)=>rule.test?.test?.('.svg'),);config.module.rules.push(// Reapply the existing rule, but only for svg imports ending in ?url{
...fileLoaderRule,test: /\.svg$/i,resourceQuery: /url/,// *.svg?url},// Convert all other *.svg imports to React components{test: /\.svg$/i,issuer: fileLoaderRule.issuer,resourceQuery: {not: [...fileLoaderRule.resourceQuery.not,/url/]},// exclude if *.svg?urluse: ['@svgr/webpack'],},);// Modify the file loader rule to ignore *.svg, since we have it handled now.fileLoaderRule.exclude=/\.svg$/i;returnconfig;},reactStrictMode: true,};module.exports=nextConfig;
The error is this:
Import trace for requested module:
./src/app/page.tsx
../../packages/icons/dist/close.svg
Module not found: Can't resolve 'react'
I can actually resolve this error by adding react as a dependency of my icons package. That is completely wrong though as my icons package only contains svg files and no other code whatsover.
The project I'm including my svg's in is a NextJS project, so react is available there
To Reproduce
Steps to reproduce the behavior:
Have a monorepo
Have a web project
Have a shared package which contains only .svg files
Try to import that svg file inside the webproject, with above webpack/nextjs config.
Expected behavior
It should import the svg and build without a problem
Note: I got svgr/webpack perfectly working when I moved those svgs inside my nextJS project
Gonna keep this issue open as I'm not sure if this is the recommended way + would be good to state this somewhere in the docs when including svg's from outside your project.
🐛 Bug Report
Inside my monorepo I have a NextJS project and a shared 'icons' package which is just a folder full of svg files.
Whenever I want to use @svgr/webpack with the below next.config.js, I get an error during building
The error is this:
I can actually resolve this error by adding react as a dependency of my icons package. That is completely wrong though as my icons package only contains svg files and no other code whatsover.
The project I'm including my svg's in is a NextJS project, so react is available there
To Reproduce
Steps to reproduce the behavior:
Expected behavior
It should import the svg and build without a problem
Note: I got svgr/webpack perfectly working when I moved those svgs inside my nextJS project
Link to repl or repo (highly encouraged)
Paste the results here:
The text was updated successfully, but these errors were encountered: