TypeScript -模块“*.svg”没有导出的成员“ReactComponent

snz8szmq  于 2023-05-08  发布在  TypeScript
关注(0)|答案(4)|浏览(427)

我正在尝试使用TypeScript将.svg文件导入为React组件。
根据React文档,这是这样做的:
import { ReactComponent as Icon } from './Icon.svg';
在TypeScript文档之后,我添加了以下内容:

// custom.d.ts

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

和/或

// tsconfig.json

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

SVG正在呈现。但是我得到了一个TypeScript错误:
[ts] Module '"*.svg"' has no exported member 'ReactComponent'. [2305]
以下是我的完整tsconfig文件,如果有帮助的话:

{
  "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"
  ]
}

谢谢大家!

5us2dqdw

5us2dqdw1#

你有export default content;,但是你正在执行一个 named 导入(不是默认导入)。

修复

更改声明以导出要导入的名称:

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

附加

建议不要在tsconfig.json中使用files。使用include

svujldwt

svujldwt2#

2019年除了@basarat的回答:React.SFC已被废弃,请考虑使用React.FunctionComponent,如:

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

ubby3x7f3#

您将自定义类型命名为custom.ts.d,一旦ts编译器配置为处理ts|tsx扩展,它就应该调用custom.d.ts
之后,您应该能够像这样将其引用到tsconfig.json include部分:

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

yizd12fk4#

拉取请求链接

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

只是因为它对我有帮助,而且有点相关。如果Jest出现错误,check this out

相关问题