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

[ellipticaldoor]

🐛 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| Operating System | macos 10.13.4

[DeMoorJasper]

Are you using built-in TS support or the TS plugin?

@fathyb any idea?

[ellipticaldoor]

Im not using the ts plugin, also parcel is working and not complaining. Is with the development tools

[DeMoorJasper]

So parcel is able to resolve this asset, but vscode complains?

But you don't get the image url either, if you import it through parcel?

[ellipticaldoor]

I get the image but I'm not sure if is hiding the typescript error.

Typescript compiles even with errors.

[fathyb]

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.

[ellipticaldoor]

@fathyb thank you, that worked

[hallya]

@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

[awulkan]

I also tried creating a .d.ts file in the root with that content, but it didn't work. :(

[fuermosi777]

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

[Arver1]

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

[fernandoajn]

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.