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.
../.declarations.d.tsfile insidesrc/and adddeclare module '*.png';to it.