在反应组件中找不到模块答案

【问题标题】：Cannot find module in react component在反应组件中找不到模块
【发布时间】：2021-01-18 20:51:33
【问题描述】：

当我尝试将图像放入反应组件时，我看到Cannot find module '../../assets/images/logo.png' or its corresponding type declarations.。我在 .d.ts 文件中添加了declare module *.png，但它仍然无法正常工作。我从 webapack 开始，所以我的问题可能非常愚蠢，但我真的需要帮助。当我从 tsconfig 中删除 "include": ["src/**/*"] 时，一切正常。有什么问题？

网页包：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')


module.exports = {
    entry: '/src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.tsx?/,
                loader: 'ts-loader'
            },
            {
                test: /\.js/,
                exclude: (/node_modules/),
                loader: 'babel-loader'
            },
            {
                test: /\.s[ac]ss$/i,
                use: ["style-loader", "css-loader", "sass-loader",],
            },
            {
                test: /\.(png$|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'assets/',
                            publicPath: 'assets/'
                        }
                    }
                ]
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new ErrorOverlayPlugin()
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080,
        open: true,
        historyApiFallback: true,
        hot: true,
        overlay: true,
    }
}

tsconfig.json：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": false,
        "jsx": "react",
        "esModuleInterop": true,
        "baseUrl": "src",
        "typeRoots" : ["node_modules/@types", "src/types"],
        "allowSyntheticDefaultImports": true,
    },
    "include": ["src/**/*"],
    "exclude": ["build"],
}

反应：

import React, { FC } from 'react'
import { NavLink } from 'react-router-dom'
import logo from '../../assets/images/logo.png'                    
     
const Header: FC = () => { 
    return (   
        <div className="header" id='header'>   
            <div className="logo">     
                <img src={logo} alt="logo"/>  
                <h1>Logo</h1>
            </div>
        </div>
    );
}
 
export default Header;

我一直在页面上看到照片但错误仍然存在。

【问题讨论】：

您的徽标是否存储在“src”文件夹之外？如果是，则将其移入，如果否，则确保路径正确并且../ 的数量正确。
@rahulpsd18 我在 src 中有资产并且路径是正确的。我在页面上看到了这张照片，但我仍然有错误。一切正常，但错误无法隐藏
你能提供一个codesandbox或codepen吗？
@rahulpsd18 我在 GitHub 上的仓库 github.com/blazej-k/weather-app
在src/ 中创建一个declarations.d.ts 文件并将declare module '*.png'; 添加到其中。

标签： javascript reactjs typescript webpack

【解决方案1】：

在src/ 中创建一个declarations.d.ts 文件并将declare module '*.png'; 添加到其中。

这应该可以解决问题，因为默认情况下用户定义的声明应该放在 src/ 中。

【讨论】：