TypeScript - Module '"*.svg"' has no exported member 'ReactComponent

Question

I'm trying to import an .svg file as a React component with TypeScript.

According to the React docs, this is done like so:

import { ReactComponent as Icon } from './Icon.svg';

Following the TypeScript docs, I've added this:

// custom.d.ts

declare module '*.svg' {
    const content: any;
    export default content;
}

and

// tsconfig.json

{
    ...
    "files": [
        "custom.d.ts"
    ]
}

The SVG is rendering. But I'm getting a TypeScript error:

[ts] Module '"*.svg"' has no exported member 'ReactComponent'. [2305]

Here is my full tsconfig file if that helps:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "plugins": [
      {
        "name": "typescript-styled-plugin"
      }
    ],
    "typeRoots": ["./node_modules/@types"],
    "lib": ["dom", "es2015", "es2017"]
  },
  "exclude": ["node_modules", "dist"],
  "files": [
    "custom.d.ts"
  ]
}

Thank you!

Can you provide a link to react docs that say this should work (I don't think it did). Thanks — basarat, Jan 10 '19 at 04:27
@basarat Here you go! https://github.com/facebook/create-react-app/pull/3718 — Matt Thomas, Jan 10 '19 at 04:31

basarat · Accepted Answer · 2020-11-19T22:39:42.197

106

You have export default content; But you are doing a named import (not a default import).

Fix

Change declaration to export the name you are importing:

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

Additional

Recommend not using files in tsconfig.json. Instead just use include

edited Nov 19 '20 at 22:39

answered Jan 10 '19 at 04:49

basarat

261,912
58
460
511

1

Hey thanks for the answer! It's correct but I posted a solution below from the CRA repo for a more type specific solution. I'll mark this as correct but maybe edit it with the info below for anyone else that runs into this. – Matt Thomas Jan 12 '19 at 12:49
This is the perfect solution! – NiRUS Jun 05 '20 at 11:33
Thanks! Note that `SFC` is deprecated now - recommend changing `React.SFC` to `React.FunctionComponent` – David Calhoun Nov 18 '20 at 16:04
1

@DavidCalhoun Thanks. I've updated the answer to use `React.FC` – basarat Nov 19 '20 at 22:40
1

make my day bro! tnx a lot – kazemm Apr 04 '22 at 13:32

MarcoLe · Answer 2 · 2019-04-15T08:47:11.457

19

2019 In addition to @basarat's answer: React.SFC is depracated now consider using React.FunctionComponent like:

declare module '*.svg' {
    import React = require('react');
    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
    const src: string;
    export default src;
}

edited Apr 15 '19 at 08:47

answered Apr 12 '19 at 16:56

MarcoLe

2,309
6
36
74

score 8 · Answer 3 · answered Jun 10 '20 at 11:37

You're naming the custom types as custom.ts.d and it should call custom.d.ts once the ts compiler is configured to process ts|tsx extensions.

After that, you should be able to reference it into your tsconfig.json include section just like this:

"include": ["custom.d.ts"]

score 6 · Answer 4 · answered May 29 '23 at 12:33

6

If you already have plugin vite-plugin-svgr installed, simply add this following line to your vite-env.d.ts file:

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

answered May 29 '23 at 12:33

Quan Nguyen

59
1
4

Should I install it as a dev dependency? – Sanka Sanjeewa Aug 12 '23 at 13:30
1

Yes, it should be a dev dependency. See it's Github Repo as well: https://github.com/lucsky/vite-plugin-svgr – Quan Nguyen Aug 16 '23 at 09:26

axrmr · Answer 5 · 2023-07-19T17:07:19.620

2

Install svgr plugin and add this to tsconfig files: types": ["vite-plugin-svgr/client"]

edited Jul 19 '23 at 17:07

answered Jul 11 '23 at 17:15

axrmr

21
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 16 '23 at 09:03
This worked for me – Hans Jul 18 '23 at 16:54

score 0 · Answer 6 · answered Jan 10 '19 at 04:54

Pull request link

declare module '*.svg' {
  import React = require('react');
   export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
   const src: string;
  export default src;
}

Just because it was helpful to me and somewhat related. If you're getting an error with Jest, check this out

score 0 · Answer 7 · answered Aug 25 '23 at 21:18

My friends, if you are using Vite and vite-plugin-svgr, just follow these steps:

Create a declaration file, name: client.d.ts (doesn't matter in types folder or in the root)

Add this line of code to that file:

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

Restart the app

OR

Add this line of code to your tsconfig.js:
```
types": ["vite-plugin-svgr/client"]
```
Restart the app

Personally, I would like to use the first solution.

TypeScript - Module '"*.svg"' has no exported member 'ReactComponent

7 Answers7

Fix

Additional

Linked