在反应组件中找不到模块

Question

When I try to put my image to react component I see Cannot find module '../../assets/images/logo.png' or its corresponding type declarations. . I've added declare module *.png in.d.ts file but it still not working. I start with webapack so my problem is possibly very stupid but I really need help. When I remove "include": ["src/**/*"] from tsconfig, everything is ok. What can be wrong?

Webpack:

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"],
}

React:

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;

All the time I see photo on page but error still exist.

Answer 1

Create a declarations.d.ts file inside src/ and add declare module '*.png'; to it.

That should solve the problem as user defined declarations should go inside the src/ by default.