جافاسكريبت - TS2307: لا يمكن العثور على الوحدة './images/logo.png'

أنا أحاول استيراد صورة PNG محلية إلى مشروع TypeScript باستخدام 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

الإجابة رقم 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'

الإجابة رقم 2

كان خطأي أنني استبعدت مرجع react-app-env.d.ts:

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

لقد دفعني Eslint للقيام بذلك بسبب قاعدة التعليقات المفرَّقة.

آمل أن يساعد هذا شخصًا ما.