-
Notifications
You must be signed in to change notification settings - Fork 27k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Webpack: @svgr/webpack broken since 10.2.4-canary.5 #25950
Comments
I`m seeing this error as well, version 10.2.4-canary.4 is working, 10.2.4-canary.5 is broken. |
@timneutkens Sorry for the direct ping, but seems to be a showstopper for upgrades at the moment. Given the popularity of the rule I just want to avoid this to be a showstopper for whatever you are going to present next week :) I believe this could be related to the following PR: #25797 |
You're customizing webpack configuration which has no guarantee that those customizations will continue working in newer versions. You can disable static image imports using:
|
If you are using babel, this plugin should work just fine babel-plugin-inline-react-svg. Just add it to .babelrc or babel.config.js plugins. |
@kikoanis Thanks for you suggestion. Did you test the approach with the latest canary? Even with the babel solution I see a similar problem ... Disabling static images didn't fix the issue for me ... I'm wondering what's the idea here - are static images supposed to replace other inline-svg solutions? |
@gustavpursche Actually I am using it right now with only the babel plugin. I got rid of the webpack plugin (next-react-svg) I was using and everything is working fine. Unfortunately I am not in a position to share my code as it is not public. |
This won't disable the type definitions for static files like SVGs though. These make my builds fail. It's still |
@mxmtsk I recently came up with a workaround even for types until a more sophisticated solution is available. I think that static image types should be toggle-able out of the box. |
somehow related to webpack 5 #26130 (comment) |
I added a feature request to internalize SVGR into Next.js's core webpack configuration. Please voice your support there! |
Loading SVG resources, we use the next-svg plugin. Underneath, the plugin leverages the great SVGr library. Between versions 10.2.4-canary.4 and 10.2.4-canary.5, incompatibility issues with the used plugin and SVGr, respectively, became known. The problem gets tracked here vercel/next.js#25950. To work around the problem in the meantime, the following next configuration gets used. images: { disableStaticImages: true } Note: In Next 11 the default webpack version is 5.
Loading SVG resources, we use the next-svg plugin. Underneath, the plugin leverages the great SVGr library. Between versions 10.2.4-canary.4 and 10.2.4-canary.5, incompatibility issues with the used plugin and SVGr, respectively, became known. The problem gets tracked here vercel/next.js#25950. To work around the problem in the meantime, the following next configuration gets used. images: { disableStaticImages: true } Note: In Next 11 the default webpack version is 5.
I think with this webpack config you can use in in v11 webpack (config) {
const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'))
fileLoaderRule.exclude = /\.svg$/
config.module.rules.push({
test: /\.svg$/,
loader: require.resolve('@svgr/webpack')
})
return config
} |
Thanks for reporting this issue! I'm going to merge with the other duplicate issue which has more comments: #26130. |
This PR does a couple things: 1. Omit svg static imports if the user has defined custom webpack config with svg rule 2. Change TS type to `any` for svg imports to avoid conflicts with other plugins The idea is that some users want to use `next/image` with static imports for most image types but not for svg and instead inline those images with a plugin. - Fixes #25950 - Fixes #26130 - Fixes #26176 - Fixes #26196 - Fixes #26067 ## Bug - [x] Related issues linked using Fixes #26130 - [x] Integration tests added
…6281) This PR does a couple things: 1. Omit svg static imports if the user has defined custom webpack config with svg rule 2. Change TS type to `any` for svg imports to avoid conflicts with other plugins The idea is that some users want to use `next/image` with static imports for most image types but not for svg and instead inline those images with a plugin. - Fixes vercel#25950 - Fixes vercel#26130 - Fixes vercel#26176 - Fixes vercel#26196 - Fixes vercel#26067 ## Bug - [x] Related issues linked using Fixes vercel#26130 - [x] Integration tests added
I'm getting the error
for "fileLoaderRule"
this error is gone, but I'm starting to get new ones
Obviously, I'm handling something wrong here, but I cant figure out, how to fix it... some1 got any hints? |
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
What version of Next.js are you using?
10.2.4-canary.12
What version of Node.js are you using?
v14.17.0
What browser are you using?
Node
What operating system are you using?
Ubuntu
How are you deploying your application?
Not yet
Describe the Bug
In order to import SVG files as React component we are currently extending the webpack config with
In the latest canary this seems to be broken and leads to:
See the codesandbox for a minimal reproduction.
Expected Behavior
I expect the import to work and to render a React component.
To Reproduce
https://codesandbox.io/s/polished-fire-z8w39
The text was updated successfully, but these errors were encountered: