0

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.

7
  • Is your logo stored outside the "src" folder? If yes then move it inside and if no then make sure the path is correct and there are correct numbers of ../. Commented Jan 18, 2021 at 21:05
  • @rahulpsd18 I have assets in src and path is correct. I see this photo on page but I've still error. Everything work good but error can't hide Commented Jan 18, 2021 at 21:29
  • Can you provide a codesandbox or codepen? Commented Jan 18, 2021 at 21:33
  • @rahulpsd18 my repo on GitHub github.com/blazej-k/weather-app Commented Jan 18, 2021 at 21:52
  • Create a declarations.d.ts file inside src/ and add declare module '*.png'; to it. Commented Jan 18, 2021 at 22:12

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.