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
When connecting svgr to my new project on Next.js 15, I encountered my page crashing with the following error:
Error: Switched to client rendering because the server rendering errored:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
At the same time, my partner runs the application on Linux without any problems. Everything works fine on Verсel as well.
/**
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
* for Docker builds.
*/
/** @type {import("next").NextConfig} */
const config = {
webpack(config) {
// Grab the existing rule that handles SVG imports
const fileLoaderRule = 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?url
use: ['@svgr/webpack'],
},
)
// Modify the file loader rule to ignore *.svg, since we have it handled now.
fileLoaderRule.exclude = /\.svg$/i
return config
},
};
export default config;
Problem solving
What worked for me to solve the problem was to simply turn off the turbo pack
Before:
"scripts": {
"dev": "next dev --turbo",
},
After:
"scripts": {
"dev": "next dev",
},
The text was updated successfully, but these errors were encountered:
1MPULSEONE
changed the title
SVGR doesn`t support Windows with turbopack
SVGR doesn`t support Windows with turbopack on Next.js 15
Dec 24, 2024
🐛 Bug Report
When connecting svgr to my new project on Next.js 15, I encountered my page crashing with the following error:
At the same time, my partner runs the application on Linux without any problems. Everything works fine on Verсel as well.
To Reproduce
Example.tsx
next.config.js
Problem solving
What worked for me to solve the problem was to simply turn off the turbo pack
Before:
After:
The text was updated successfully, but these errors were encountered: