TS2307：找不到模塊“./images/logo.png”

Question

我正在嘗試將本地 png 圖像導入到我的 ts webpack 項目中，但出現以下錯誤。

TS2307: Cannot find module './images/logo.png'.

我所有的其他模塊都可以正常導入，即； 我的 css、svg 和 ts 文件。 它似乎只發生在 png 上。

我的 webpack.config.js 模塊部分

module: {
    rules: [{
      test: /\.ts$/,
      use:['ts-loader']
    },{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },{
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      use: ['url-loader?limit=100000']
    },{
      test: /\.png$/,
      use: ['file-loader']
    }]
  }

我的 tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "module": "CommonJS",
    "target": "ES5",
    "lib": ["DOM", "ES2015.Promise", "ES5"],
    "allowJs": true,
    "alwaysStrict": true
  }
}

我的進口聲明

import Logo from './images/logo.png';

我的文件結構

root
-src
--css
--images
---logo.png
--index.ts
--templates.ts
-package.json
-tsconfig.json
-webpack.config.js

Answer 1

我在這里找到了答案。 Webpack 和 Typescript 圖像導入

這就是我所做的。

添加了一個新目錄和一個 import-png.d.ts 文件

root
-typings
--custom
---import-png.d.ts

導入-png.d.ts

declare module "*.png" {
  const value: any;
  export default value;
}

將我的文件加載器模塊更改為：

{
      test: /\.(png|jpe?g|gif|jp2|webp)$/,
      loader: 'file-loader',
      options: {
        name: 'images/[name].[ext]'
      }

現在我可以用這樣的語句導入：

import Logo from './images/logo.png'

Answer 2

我的錯誤是我排除了參考 react-app-env.d.ts：

/* eslint-disable spaced-comment */
/// <reference types="react-scripts" />

由於間隔注釋規則，Eslint 促使我這樣做。

希望這可以幫助某人。