TypeScript - module '"*.svg"' 没有导出成员 'ReactComponent

IT技术 reactjs typescript svg

2021-04-29 17:12:19

我正在尝试.svg使用 TypeScript将文件作为 React 组件导入。

根据 React 文档，这是这样做的：

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

按照 TypeScript 文档，我添加了以下内容：

// custom.ts.d

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

谢谢！

4个回答

你有export default content;但你正在做一个命名导入（不是默认导入）。

使固定

更改声明以导出您正在导入的名称：

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

额外的

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

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

您将自定义类型命名为，custom.ts.d并且custom.d.ts一旦 ts 编译器配置为处理ts|tsx扩展，它就会调用。

之后，您应该能够tsconfig.json像这样将其引用到您的包含部分中：

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

拉取请求链接

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

只是因为它对我有帮助并且有点相关。如果您在使用 Jest 时遇到错误，请查看此内容

其它你可能感兴趣的问题

上一篇React Router v4 - 使用不同的查询参数重定向到同一路由下一篇我们如何使用 React 钩子实现 componentWillUnmount？