Issue with Importing SVGs: "Does not provide an export named 'ReactComponent'"

[semihtarik]

I am encountering an issue while trying to import SVG files as React components in my Vite + React + TypeScript project. Despite following the documentation and proper configuration, I receive the following error:

javascript Kodu kopyala Uncaught SyntaxError: The requested module '/src/assets/chute-icon.svg?import' does not provide an export named 'ReactComponent' Here are the steps I followed:

Installed the necessary packages:

vite @vitejs/plugin-react vite-plugin-svgr Updated vite.config.ts:

typescript Kodu kopyala import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import svgr from 'vite-plugin-svgr';

export default defineConfig({ plugins: [ react(), svgr({ svgrOptions: { icon: true, }, }), ], }); Created vite-env.d.ts:

typescript Kodu kopyala /// /// Tried to import the SVG as a React component in CustomIcons.tsx:

typescript Kodu kopyala import React from 'react'; import { ReactComponent as ChuteIcon } from '../assets/chute-icon.svg';

const icons = { chute: ChuteIcon, };

type IconProps = { name: keyof typeof icons; width?: string; height?: string; fill?: string; };

const CustomIcons: React.FC = ({ name, width = '24px', height = '24px', fill = 'currentColor' }) => { const Icon = icons[name];

if (!Icon) { return null; }

return (

); };

export default CustomIcons;

I have ensured that the SVG file paths are correct and that the SVG files contain valid SVG content. Despite this, the error persists.

[shuaiqidekaige]

use .svg?react to resolve it

[XindiShang]

https://github.com/pd4d10/vite-plugin-svgr/issues/92#issuecomment-1733753768 This works for me. Plus, add "vite-plugin-svgr/client" to "types" attribute in your ts.config.json, like this:

[jeffwhuber]

Change: import { ReactComponent as ChuteIcon } from '../assets/chute-icon.svg';

to

import ChuteIcon from '../assets/chute-icon.svg?react';

Make sure in vite-env.d.ts you have:

/// <reference types="vite-plugin-svgr/client" />

[eduwr]

Maybe this helps. I created a script to update the imports from the project because we had a lot of files to change.

https://gist.github.com/eduwr/9e305ba412abadaa1f38139b195e0c69