TypeScript在导入SVG文件时找不到模块

Question

这是一个使用Typescript、React和webpack创建的Web应用程序。我想通过webpack使用svg文件。但是，我遇到了

    TS2307: Cannot find module '~/images/slide.svg'. 

Typescript文件位于/frontend/src/，并且Typescript文件已经成功构建。

然后，我在网站上尝试了一些解决方案。但是我无法解决这个问题。 我尝试的方法简要描述如下。

我添加了一个文件，在其中定义了'typeRoots'中的类型。 tsconfig.json

{
  "compilerOptions": {
    "outDir": "./app/assets/javascripts/bundles",
    "sourceMap": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "moduleResolution": "node",
    "module": "es2015",
    "target": "es6",
    "jsx": "react",
    "removeComments": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./frontend/src/*"]
    },
    "typeRoots": ["types", "node_modules/@types"]
  },
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "cacheDirectory": "tmp/build_caches/awesome-typescript-loader"
  },
  "include": [
    "./frontend/src/*"
  ],
  "exclude": [
    "node_modules",
    "bundles",
    "**/*.js"
  ]
}

类型/图片.d.ts

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

我在webpack中使用 'file-loader' 来构建SVG文件。

请帮帮我！！

- hideto

Answer 1

如果您正在使用 Nextjs，您可以创建一个新文件additional.d.ts（与next-env.d.ts在同一级别），并为图像文件声明模块。然后，您应该在tsconfig.json中包含此文件。

additional.d.ts:

declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.svg";
declare module "*.gif";

tsconfig.json：

{
  ...
  "include": ["next-env.d.ts", "additional.d.ts", "**/*.ts", "**/*.tsx"],
}

- Killian Huyghe

---

这对我有用。在我的“src/custom.d.ts”后面加上“** / .ts”，“* / *.tsx”。 - Rogelio

Answer 2

我觉得这是因为你在Typescript配置中的include部分。 试试这个：

"include": [
  "./frontend/src/**/*"
],

否则，您只会包含位于src文件夹顶层的打字文件。而您的svg打字文件位于子级，因此Typescript不会将其包含进来。

- J. Meier

---

文件规范不能以递归目录通配符（“”）结尾：'./src/*/'。 - Madhu

Answer 3

对我来说，被接受的答案导致了奇怪的行为。例如，如果我引用一个未定义的变量，我的构建不会失败。

对我有用的方法：

1. 在项目根目录中创建 custom.d.ts ：

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

2. 在tsconfig.json的include中添加custom.d.ts

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

用法：

import { ReactComponent as MyIcon } from '../icon.svg'

...

function MyComponent() {
  return <MyIcon></MyIcon>
}

- hetelek

---

这应该是被接受的答案，因为当前的答案对我没有起作用。 - Vaibhav Goyal

@VaibhavGoyal 我完全同意！ - PA55ION

最好将其放在 /{project_root}/types/svg.module.d.ts 中。 - Tonis F. Piip

这篇文章似乎包含一些很好的信息：https://duncanleung.com/typescript-module-declearation-svg-img-assets/ - Tonis F. Piip

Answer 4

我应该像这样更好地包含在其中：

  "include": ["**/*.ts", "**/*.tsx", "images.d.ts"],

- Vladimir Vs

---

为什么这样做会更好？ - Robin