parcel: Cannot find module error when importing an static file using typescript

🐛 bug report

If you try to import an image, in normal javascript, to get the url of the file it just works:

import characterImage from '@client/assets/img/character.png'

But when I use typescript I get this error on the vscode console

Cannot find module '@client/assets/img/character.png'.

🎛 Configuration (.babelrc, package.json, cli command)

this is my tsconfig

{
	"compilerOptions": {
		"strict": false,
		"module": "commonjs",
		"moduleResolution": "node",
		"types": ["node", "jest"],
		"newLine": "LF",
		"outDir": "lib",
		"target": "es2017",
		"sourceMap": true,
		"declaration": true,
		"jsx": "preserve",
		"lib": [
			"es2017",
			"dom"
		],
		"noUnusedLocals": true,
		"noUnusedParameters": true,
		"noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "experimentalDecorators": true,
		"baseUrl": "./src",
		"paths": {
            "@client/*": ["./client/*"],
            "@server/*": ["./server/*"]
		}
	},
	"include": [
		"**/*.ts"
	],
	"exclude": [
		".git",
		"node_modules"
	]
}

🤔 Expected Behavior

It should just load the image.

😯 Current Behavior

I get the error I just said above.

💁 Possible Solution

No sure, is maybe because an image doesn’t have types?

🔦 Context

So the app just works and ignores the fact that there is an error with typescript. Is very annoying for development to have false errors all over the place.

🌍 Your Environment

Software	Version(s)
Parcel	1.8.1
Node	v10.2.1
npm/Yarn	yarn 1.7.0

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 20 (3 by maintainers)

Most upvoted comments

Create a .d.ts file in your project and put :

declare module '*.png'

It will instruct TypeScript to use any for all imports ending with .png. It it still doesn’t work try to restart VSCode.

+201

fathyb on May 27, 2018

you need to add the d.ts to “include” of tsconfig.json

+45

fuermosi777 on Sep 16, 2019

Create a .d.ts file in your project and put :
declare module '*.png'
It will instruct TypeScript to use any for all imports ending with .png. It it still doesn’t work try to restart VSCode.

It works for me, working with expo-reactnative, I just made in the root a file called index.d.ts

+13

mrcMesen on Oct 1, 2021

Create a .d.ts file in your project and put :
declare module '*.png'
It will instruct TypeScript to use any for all imports ending with .png. It it still doesn’t work try to restart VSCode.

It worked here. I’m using create-react-app and put it into react-app-env.d.ts file.

+12

fernandoajn on May 12, 2020

@fathyb not sure to understand how it works. I’ve created the .d.ts in root level of my project and declaring a module for svg the way you did it but I still got lint errors.

So I’ve declared it in the file where I try the import and I got: Invalid module name in augmentation, module '*.svg' cannot be found

hallya on Apr 20, 2019

Create a .d.ts file in your project and put :
declare module '*.png'
It will instruct TypeScript to use any for all imports ending with .png. It it still doesn’t work try to restart VSCode.
It works for me, working with expo-react native, only I create in the root a file called index.d.ts

Creating index.d.ts inside the project’s root folder is what did the trick for me. Thanks!

FelipeRosa on Jun 24, 2021

if you entry point fileName - index.ts you need to name file at will but not index.ts

Arver1 on Apr 21, 2020

This is also happening to me within vscode. When the file containing one of these imports (e.g. png, woff2, etc.) is not active/open as an active tab then no errors appear. Once the file is opened then the errors appear.

Hey Michael, I should have updated this thread sooner! I managed to find a solution for Parcel V2 (which is what I am using).

I got the solution from the Parcel V2 TypeScript documentation, where it shows you the tsconfig.json config.

In the end, what worked for me was putting this in my tsconfig:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "jsxImportSource": "react-jsx",
  }
}

The only thing I changed from the documentation was setting "preact" to "react-jsx". Of course, change it to suit your environment.

I am not at work at the moment, so this is from the top of my head. Let me know if you still get problems, I may have missed something. 😃

jack3898 on Sep 30, 2021

Just create the file src > react-app-env.d.ts with the following contetn?

/// <reference types="react-scripts" />

Solved.

ghost on Mar 23, 2022