CODEWITHSUNDEEP
typescriptbabeljsparceljs
mjfneto
mjfneto

Reputation: 113

Importing non-code asset (.png) from Javascript in Parcel 2 displays ts error

I am using Parcel v2 bundler. It says the following about import static files:

If you want import the url to an image (or a soundfile, etc.) from Javascript, you need to prepend url: to the module specifier (read more about named pipelines in Plugin Configuration)

I have tried adding url: and also the standard method from v1. The image is bundled correctly, but I keep getting this ts error:

Cannot find module 'url:../assets/parcel.png' or its corresponding type declarations. ts(2307)

error ts(2307) is VSCode

I have the following tsconfig.json:

{
    "compilerOptions": {
        "jsx": "react",
    },
}

Since Parcel bundles without issues, I am assuming this is related to some missing TypeScript configuration. Would you please confirm this?

Upvotes: 1

Views: 973

Answers (1)

mjfneto
mjfneto

Reputation: 113

Basically, this is what is happening, from TypeScript: Handbook, Working with Other JavaScript Libraries:

To describe the shape of libraries not written in TypeScript, we need to declare the API that the library exposes.

We call declarations that don’t define an implementation “ambient”. Typically, these are defined in .d.ts files. If you’re familiar with C/C++, you can think of these as .h files.

Creating a .d.ts in your root directory with the following content should do the work:

declare module 'url:*' {
  export default string;
}

For any further questions or issues, please refer to this discussion in Parcel's Github.

Upvotes: 1

Related Questions