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 using SVGR with Vite in a Server-Side Rendering (SSR) configuration, the default type definitions provided by SVGR lead to errors during the server-side rendering process.
Using .svg?react to import SVGs as React components cause "Invalid tag" errors during server-side rendering.
Example
// Using Vite SSRimportReactfrom'react';importNodeLogofrom'./assets/node.svg?react'exportconstApp=()=>{return(<div><h1>Welcome to my app</h1><NodeLogowidth={50}height={50}/></div>);}
Error
Error: Invalid tag: /src/assets/node.svg?react at startChunkForTag (/Users/bebeal/Prod/vite-amplify/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:2734:13) at pushStartGenericElement (/Users/bebeal/Prod/vite-amplify/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:2560:15) at pushStartInstance (/Users/bebeal/Prod/vite-amplify/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:2838:18) at renderHostElement (/Users/bebeal/Prod/vite-amplify/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5640:18) ...
Workaround
A simple workaround is to override the type definitions as follows:
// Defines the type for .svg?url imports to be a stringdeclare module '*.svg?url'{constsrc: string;exportdefaultsrc;}// Defines the type for .svg imports to be React componentsdeclare module '*.svg'{constReactComponent: React.FC<React.SVGProps<SVGSVGElement>>&{title?: string};exportdefaultReactComponent;}
Usage
The updated usage works for both react components and urls, without any errors.
// Using Vite SSRimportReactfrom'react';importNodeLogofrom'./assets/node.svg'importNodeUrlfrom'./assets/node.svg?url'exportconstApp=()=>{return(<div><h1>Welcome to my app</h1><NodeLogowidth={50}height={50}/><imgsrc={NodeUrl}alt="Node.js logo"width={50}height={50}/></div>);}
I'm open to discussing further and contributing if we can get this functionality to work out of the box. But feel free to address this as you see fit, I just wanted to bring attention to it.
The text was updated successfully, but these errors were encountered:
Problem
When using SVGR with Vite in a Server-Side Rendering (SSR) configuration, the default type definitions provided by SVGR lead to errors during the server-side rendering process.
Using
.svg?react
to import SVGs as React components cause "Invalid tag" errors during server-side rendering.Example
Error
Workaround
A simple workaround is to override the type definitions as follows:
Usage
The updated usage works for both react components and urls, without any errors.
I'm open to discussing further and contributing if we can get this functionality to work out of the box. But feel free to address this as you see fit, I just wanted to bring attention to it.
The text was updated successfully, but these errors were encountered: