I encountered an issue while attempting to import a local png image into my ts webpack project. The error message displayed was as follows:
TS2307: Cannot find module './images/logo.png'.
All other modules, such as css, svg, and ts files, import successfully without any errors. This problem appears to be specific to png files.
Here is the configuration in my webpack.config.js file:
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']
}]
}
Below is my tsconfig.json setup:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"module": "CommonJS",
"target": "ES5",
"lib": ["DOM", "ES2015.Promise", "ES5"],
"allowJs": true,
"alwaysStrict": true
}
}
The import statement causing the error is:
import Logo from './images/logo.png';
My file structure looks like this:
root
-src
--css
--images
---logo.png
--index.ts
--templates.ts
-package.json
-tsconfig.json
-webpack.config.js