在typescript(*.tsx)文件中,我不能用下面的语句导入svg文件:

import logo from './logo.svg';

Transpiler说:[ts]找不到模块'./logo.svg'。 我的svg文件就是<svg>…</svg>。

但在.js文件中,我能够导入它没有任何问题,完全相同的导入语句。我想这与svg文件的类型有关,它必须以某种方式为ts transpiler设置。

你能在ts文件中分享一下如何做到这一点吗?


当前回答

我找到的解决方案:在ReactJS项目中,在文件react-app-env.d中。你可以删除评论中的空格,比如:

之前

// / <reference types="react-scripts" />

/// <reference types="react-scripts" />

我希望能帮到你

其他回答

对我来说,我必须包含react-app-env.d。tsconfig*.json:

  "include": [
    "src/Router.tsx",        // my main entry point
    "src/global.d.ts",       // global stuff
    "src/react-app-env.d.ts" // react global stuff
  ]

对我来说,当我在src/types/images.d.ts中放入以下一行时,它就工作了

声明模块'*.svg';

我用下面的方法导入图像

import {ReactComponent as WifiIcon} from '../../ assets/images/Wifi.svg';

在tsconfig.json

我有以下complierOptions

"compilerOptions": {
    "typeRoots": ["node_modules/@types", "src/types"]
}

希望它能帮助到别人。我使用的是最新版本的CRA。

如果你正在使用Create-React-App启动器,请确保react-app-env.d。Ts包含如下行:

/// <reference types="react-scripts" />

如果没有其他的答案工作,尝试重新启动你的IDE(即VS Code)。对我来说,这就解决了问题。

找不到模块或对应的类型声明|无法在typescript中导入svg文件

在。/custom.d中。Ts文件,添加这个:

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

如果你有任何困惑,请观看这个视频。 https://www.youtube.com/watch?v=Skhgdp7R9Tk