## 🐛 Bug Report 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. ## To Reproduce Example.tsx ``` import IconDelete from '~/shared/assets/icons/icondeleteblack.svg'; const Example: React.FC = () => { return ( <div> <IconDelete/> </div> ) } ``` next.config.js ``` /** * 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", }, ```
This issue appears to be discussing a feature request or bug report related to the repository. Based on the content, it seems to be still under discussion. The issue was opened by 1MPULSEONE and has received 3 comments.