Troubleshooting TypeScript Error: Module ‘*.svg’ has no exported member ‘ReactComponent’
If you’re working with TypeScript in a React project and encounter the error message Module '*.svg' has no exported member 'ReactComponent', don’t worry! This issue can be resolved by making a few adjustments in your code.
1. Check your file imports
First, ensure that your import statement for the SVG file is correct. According to the React documentation, the import should look like this:
import { ReactComponent as Icon } from './Icon.svg';Verify that the file path is accurate and matches the location of your SVG file.
2. Update your custom type declaration
The next step is to update your custom type declaration file (custom.d.ts) to properly export the ‘ReactComponent’ member.
// custom.d.ts
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FunctionComponent<React.SVGProps>;
const src: string;
export default src;
}Make sure to change your function component type to React.FunctionComponent if you are working with TypeScript version 3.0 or above.
3. Configure your tsconfig.json file
Update your tsconfig.json file to include the custom type declaration file:
// tsconfig.json
{
...
"include": [
"custom.d.ts"
]
}By adding the custom declaration file to the include array, TypeScript will recognize and include it during the compilation process.
Conclusion
Importing SVG files as React components in TypeScript may sometimes result in the error message Module '*.svg' has no exported member 'ReactComponent'. By following the troubleshooting steps outlined above, you can resolve this issue and successfully import and use SVG files in your React components.
Remember to double-check your file imports, update your custom type declaration file, and configure your tsconfig.json file accordingly. With these adjustments, you’ll be able to utilize SVG files seamlessly in your TypeScript and React projects.
reference :
Read Another Article :
