TS cannot find module from node_modules when importing an image

Question

I have the following piece of code within my .tsx file:

import L from 'leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

And Typescript is complaining about the 2nd and 3rd line. Not only the linter, but the TS compiler itself.

Specifically the linter says that "It cannot find module 'blabla/icon.png' or its corresponding type declarations. However, importing L is ok.

Anyone has any idea why this is happening and how to solve this?

My tsconfig file looks like the following:

{
  "compilerOptions": {
      "outDir": "./dist/",        // path to output directory
      "sourceMap": true,          // allow sourcemap support
      "strictNullChecks": true,   // enable strict null checks as a best practice
      "module": "esnext",         // specify module code generation
      "jsx": "react",             // use typescript to transpile jsx to js
      "target": "es5",            // specify ECMAScript target version
      "allowJs": true,             // allow a partial TypeScript and JavaScript codebase
      "baseUrl": ".",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "paths": {
    }
  },
  "include" : ["src"],
  "exclude": ["node_modules", "dist", "config", ".vscode"]
}

Thank you in advance.

Yes, apparently it is the same as I mentioned below – Javier Guzmán Jul 12 '20 at 08:34 — Javier Guzmán, Jul 12 '20 at 08:34

score 11 · Accepted Answer · answered Jul 09 '20 at 05:40

11

I solved this by creating an index.d.ts file with the following content:

declare module '*.png';

answered Jul 09 '20 at 05:40

Javier Guzmán

1,014
2
13
27

2

God! I was put this code in some file that I already have, so it wasn't work. When I created a new file with this code, everything work – Lai32290 Aug 11 '21 at 18:37
React noob here, where do I put / reference it? (index.d.ts) – Dr. Andrew Burnett-Thompson Nov 25 '22 at 17:38
In root folder of the project – Javier Guzmán Nov 27 '22 at 06:45

score 2 · Answer 2 · answered Jul 08 '20 at 21:29

Anyone has any idea why this is happening?

Because the import statement works only for JS modules and (this should be obvious) an image file is not a JS module.

Because importing modules and module bundlers have quite some history, there are hacks to make static assets look like JS modules (see e.g. https://github.com/rollup/awesome#other-file-imports). It is possible to configure a bundling toolchain in such a way that a CSS assets looks like a JS module, and said JS module is actually JS code that runs (and its effect is to append the wrapped CSS asset into a document body).

It's possible to apply such hacks to image assets, but since the semantics are not standardized, the behaviour will depend on how your toolchain is configured (e.g. compare @rollup/plugin-url, @rollup/plugin-image, rollup-plugin-file-as-blob, rollup-plugin-imagemin and rollup-plugin-smart-asset , all of which allow to import image assets but with wildly varying behaviour... and that's just for Rollup-based toolchains, I'm not even considering webpack, parcel or others here).

...and how to solve this?

Do not import image assets as if they were JS code, and be mindful of your toolchain.

Your answer seems to be very focused on JS, however this is Typescript. I am just saying because for example I have also a JS file that imports an image just like that and it works. On top of that, if I ignore the TS error it also works. — Javier Guzmán, Jul 09 '20 at 05:33
I just found the answer, please, see my response down below. — Javier Guzmán, Jul 09 '20 at 05:41

TS cannot find module from node_modules when importing an image

2 Answers2