10

I put up my own typescript project with the Parcel compiler and got everything running on the built-in server. I implemented pixi.js and wanted to import .png files into my .ts files. But when I try to import it says it can't find the module, even tho both files are in the same folder? What am I missing?

enter image description here

enter image description here

I tried to do the following

npm install @types/node --save-dev

tsconfig.json (located in my root folder)

{
  "compilerOptions": {
    "types": ["node"],
    "typeRoots": ["node_modules/@types"]
  }
}
anonymous-dev
  • 2,897
  • 9
  • 48
  • 112
  • If you're using webpack to bundle then take a look at https://stackoverflow.com/questions/43638454/webpack-typescript-image-import?rq=1. If not then use webpack (or similar) to bundle and take a look at that question. – apokryfos Nov 26 '19 at 16:55
  • I'm using Parcel, isn't there a way to do this with Parcel? – anonymous-dev Nov 26 '19 at 16:58
  • Yes Parcel fills a similar role to webpack so it should just work if you add the type definition for png modules – apokryfos Nov 26 '19 at 17:00
  • I installed @types/node and edited my tsconfig but it does not seem to be working. Is this the correct way to add type defenitions? I edited the question with the tsconfig – anonymous-dev Nov 26 '19 at 17:04
  • I found https://www.npmjs.com/package/@types/parcel-bundler/v/1.12.0 and installed it but can't find how to set it up anywhere. Do you know how? – anonymous-dev Nov 26 '19 at 17:26
  • `@types` packages don't normally need setting up. Maybe that's not the right one – apokryfos Nov 26 '19 at 17:32

1 Answers1

16

As far as I can guess from your given example, this does not have anything to do with Parcel.

Parcel v1 will internally invoke tsc and the compiler will simply emit an error for unknown file extensions like .png, because pure TS projects will only be able to import code files (.js,.ts, .tsx, .jsx or .json) without a module bundler like Parcel or Webpack involved.

Bundlers allow to import other file types by converting them into valid modules that can be consumed in your project (implemented by loaders in Webpack, Parcel does handle it even more transparently).

In order to "convince" the compiler, that these sorts of imports are fine and to make the module known, wildcard module declarations can be used. For example to make .png file imports compile, you create a file globals.d.ts or similar with following declaration:

declare module '*.png';

That already should be enough to satisfy the compiler (here is a Parcel specific related issue).

Hope, it helps.

ford04
  • 66,267
  • 20
  • 199
  • 171