TS2307: Cannot find module './images/logo.png'

Question

I'm trying to import a local png image into my ts webpack project, and I get the following error.

TS2307: Cannot find module './images/logo.png'.

All my other modules are importing just fine, ie; my css, svg and ts files. It only seems to happen with png.

My webpack.config.js modules section

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']
    }]
  }

My tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "module": "CommonJS",
    "target": "ES5",
    "lib": ["DOM", "ES2015.Promise", "ES5"],
    "allowJs": true,
    "alwaysStrict": true
  }
}

My import statement

import Logo from './images/logo.png';

My file structure

root
-src
--css
--images
---logo.png
--index.ts
--templates.ts
-package.json
-tsconfig.json
-webpack.config.js

Possible duplicate of [Typescript image import](https://stackoverflow.com/questions/51100401/typescript-image-import) — weegee, Jul 20 '19 at 18:52
https://stackoverflow.com/a/59139251/9349388 This solution worked for me. The issue I faced was the same. — Arokia Prabha, Mar 31 '20 at 03:10

score 69 · Answer 1 · answered Jul 20 '19 at 22:48

69

I found the answer here. Webpack & Typescript image import

Here's what I did.

Added a new directory and a import-png.d.ts file

root
-typings
--custom
---import-png.d.ts

import-png.d.ts

declare module "*.png" {
  const value: any;
  export default value;
}

changed my file-loader module to this:

{
      test: /\.(png|jpe?g|gif|jp2|webp)$/,
      loader: 'file-loader',
      options: {
        name: 'images/[name].[ext]'
      }

and now I can import with a statement like this:

import Logo from './images/logo.png'

answered Jul 20 '19 at 22:48

Jonathon Murphy

1,307
1
8
7

11

PS, ```value``` should be ```string```. – JamesYin May 11 '20 at 01:33
I'm telling you custom type declarations in projectroot/custom/import-* that is some dark magic ... adding the files there for each jpg&png was enough :-) – jave.web Jan 20 '22 at 14:41
This helped me today. Thank you! :) – Alexander Apr 22 '22 at 14:55

score 17 · Answer 2 · answered Dec 02 '19 at 12:48

17

My mistake was that I excluded the reference react-app-env.d.ts:

/* eslint-disable spaced-comment */
/// <reference types="react-scripts" />

Eslint has pushed me to do this because of the spaced-comment rule.

Hope this helps someone.

answered Dec 02 '19 at 12:48

Charles

171
1
4

For those who are trying to use this approach. You would also need `react-scripts` development package for it to work: `npm install react-scripts --save-dev`. `react-app-env.d.ts` file can be placed anywhere where it can be seen by TypeScript compiler, the usual location is `src` directory of the project. – ogggre Jul 02 '23 at 13:02

score -4 · Answer 3 · answered May 05 '22 at 07:12

-4

Just create a d.ts file in root folder and copy below line.

 declare module '*'

Restart the VScode, Good to go

answered May 05 '22 at 07:12

Rajat.r2

137
2
13

1

This is a terrible idea, you will lose any intellisense on trying to import from modules that do not exist. – coppereyecat Jul 16 '22 at 23:25

TS2307: Cannot find module './images/logo.png'

3 Answers3

Linked