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
SVG export Errors after Upgrading vite-plugin-svgr from 3.x to 4.x #109
Comments
Hello, had a same problem and wasted lots of time searching for possible solutions. Using:
What really helped me is removing old index.d.ts for .svg files (for TS): declare module '*.svg' {
import * as React from 'react'
export const ReactComponent: React.FunctionComponent<
React.ComponentProps<'svg'> & { title?: string }
>
export default ReactComponent
} Next step is changing index file with exports from: export { ReactComponent as Icon } from './icon.svg'; to: export { default as Icon } from './icon.svg?react'; I believe it's not the best solution, but at least it works for me (imports work fine too). |
Not working |
Hey, my workaround was to use @svgr/rollup import svgr from "@svgr/rollup";
...
export default defineConfig({
...
plugins: [
svgr({ dimensions: false, svgo: false, typescript: true }),
...
],
...
}); I let the declare module "*.svg" {
import * as React from "react";
export const ReactComponent: React.FunctionComponent<
React.SVGProps<SVGSVGElement> & { title?: string }
>;
export default ReactComponent;
} And my export { ReactComponent as IconDownload } from "assets/images/icons/icon_download.svg";
export { ReactComponent as IconEye } from "assets/images/icons/icon_eye.svg";
export { ReactComponent as IconPause } from "assets/images/icons/icon_pause.svg";
export { ReactComponent as IconPlay } from "assets/images/icons/icon_play.svg"; |
export IconPlay from "assets/images/icons/icon_play.svg?react"; worked for me. It returns react component |
It works but if you are using jest and react testing library for testing. It doesn't find the module (file) with the path ends with ?react and the test case fails. |
This worked for me in combination with the above mentioned |
Doesn't work for me, even in combination of the above mentioned |
Under the hood vite-plugin-svgr use "@svgr/core", "@rollup/pluginutils" So please use directly their rollup plugin described here: https://react-svgr.com/docs/rollup/ To make no difference between vite-plugin-svgr and @rollup/svgr use it like follow in the import svgr from "@svgr/rollup";
...
export default defineConfig({
...
plugins: [
svgr({ dimensions: false, svgo: false, typescript: true }),
...
],
...
}); and like before: I let the declare module "*.svg" {
import * as React from "react";
export const ReactComponent: React.FunctionComponent<
React.SVGProps<SVGSVGElement> & { title?: string }
>;
export default ReactComponent;
} And my export { ReactComponent as IconDownload } from "assets/images/icons/icon_download.svg";
export { ReactComponent as IconEye } from "assets/images/icons/icon_eye.svg";
export { ReactComponent as IconPause } from "assets/images/icons/icon_pause.svg";
export { ReactComponent as IconPlay } from "assets/images/icons/icon_play.svg"; |
Issue with Upgrading
vite-plugin-svgr
from Version 3.3.0 to 4.2.0: SVG Import ErrorsDescription of the Issue
After updating
vite-plugin-svgr
from version 3.3.0 to 4.2.0,I am encountering an issue with importing SVG icons.
Previously, I exported all my SVG icons from an
index.jsx
file in my assets folder,which allowed for easy use with only one
import
and auto completion in my.tsx
files.Code Example
Here is how icons were exported in version 3.3.0:
And this is how I imported these icons in my .tsx components:
Encountered Problem
After updating to version 4.2.0, I am getting an import error in the index.jsx file, where I only do exports:
Uncaught SyntaxError: ambiguous import: IconDownload index.jsx:2:10
Attempts to Resolve
I have spent approximately a day trying to resolve this issue.
I have reviewed the documentation and searched for similar cases online,
but I haven't found anything that exactly matches my problem.
Request for Assistance
Could you please guide me towards a solution or provide insights on what might be causing this issue?
I don't want to lost my one line import with auto completion.
Thank you in advance for your help and guidance.
The text was updated successfully, but these errors were encountered: