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

snz8szmq 于 2023-05-08 发布在 TypeScript

关注(0)|答案(4)|浏览(428)

我正在尝试使用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"
  ]
}

谢谢大家！

typescript

来源：https://stackoverflow.com/questions/54121536/typescript-module-svg-has-no-exported-member-reactcomponent

4条答案

按热度按时间

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

赞(0）回复(0）举报 2023-05-08

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;
}

赞(0）回复(0）举报 2023-05-08

ubby3x7f3#

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

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

赞(0）回复(0）举报 2023-05-08

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

赞(0）回复(0）举报 2023-05-08

我来回答

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

4条答案

修复

附加

相关问题

热门标签

最新问答