reactjs - 将 PNG/SVG 导入 React - TS2307 : Cannot find module

Question

当尝试将 PNG/SVG(或任何其他类型的图像!)导入我的 React 项目时，TypeScript 抛出以下错误:

TS2307: Cannot find module '../assets/images/homeHeroImage.svg' or its corresponding type declarations.

我在前端使用 react、typescript 和 webpack，文件目录结构如下:

+frontend
   +src
      +assets
         +images
            - homeHeroImage.svg
      +components
         - App.tsx
         - Header.tsx
         +home
            - Home.tsx
      - index.js
      - global.d.ts
- package.json
- package-lock.json
- tsconfig.json
- webpack.config.js

下面是带有导入错误的代码(我可以使用@ts-ignore 抑制错误并且代码有效):

import React from "react";
import Header from "../Header";

import HomeHeroImage from "../../assets/images/homeHeroImage.svg";

const Home = () => <Header headingText="Heading text" slogan="A slogan" imagePath={HomeHeroImage}/>;

export default Home;

我已经看到这个错误发生在其他人身上并尝试使用现有的解决方案(如 this one )，例如在 src 文件夹中添加一个 .d.ts 文件(在我的例子中是 global.d.ts)，其中包含以下:

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

但是，这对我不起作用。以下是我的 tsconfig.json 文件的内容供引用:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "ESNext",
        "moduleResolution": "node",
        "jsx": "react-jsx",
        "noEmit": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "strict": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "baseUrl": "frontend/src",
    },
    "files": ["frontend/src/*"],
    "include": [
        "frontend/src/*",
        "frontend/src/global.d.ts",
    ]
}

任何想法将不胜感激。

Answer 1

问题原来是我的 tsconfig.json 文件中的一个设置(我不确定是哪一个，因为我刚刚用 create-react-app 配置的输出替换了该文件)。请参阅下面新更新的 tsconfig.json 文件，该文件解决了问题:

{
"compilerOptions": {
    "target": "es5",
    "lib": [
        "dom",
        "dom.iterable",
        "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
},
"include": [
    "frontend/src"
    ]
}