Ambient module not included in transformer-typescript-types

[pedromcunha]

🐛 bug report

Error message from compiler:

@parcel/transformer-typescript-types: Property 'model-viewer' does not exist on type
'JSX.IntrinsicElements'.

I'm trying to add model-viewer which is a web component to a react library. I've gone ahead and added this to the parcel.d.ts file:

declare module JSX {
  interface IntrinsicElements {
    'model-viewer': any
  }
}

This appeases the tslint in vscode and when I run tsc in the terminal on the directory. It's my understanding that this should essentially work when running parcel build or parcel watch

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

tsconfig: https://github.com/reservoirprotocol/reservoir-kit/blob/main/tsconfig.base.json
parcelrc: https://github.com/reservoirprotocol/reservoir-kit/blob/main/.parcelrc

🔦 Context

Trying to integrate the model-viewer web component in my react library packaged by parceljs:
https://github.com/google/model-viewer

[mischnic]

@parcel/transformer-typescript-types works a bit differently than tsc in that it only considers files that are imported explicitly (and it also ignores the tsconfig include for that reason, everything that's imported is included, everything else isn't). So you have to import "./parcel.d.ts" or /// reference path="./parce.d.ts" somewhere

[pedromcunha]

That makes sense but even still when using either of those imports in multiple places it doesn't resolve the build error. Is there somewhere specific where you recommend putting that import for the parcel.d.ts file?

Edit: I'm on version 2.6.2 if that makes a difference

[mischnic]

So apparently a regular import doesn't work, my bad.
The tripleslash directive does work for me, but it's actually a slightly different syntax:
/// <reference path="./parcel.d.ts" />
That should work.

[pedromcunha]

Amazing, thank you for the quick support there. I appreciate it.

[danieltroger]

/// <reference path="./parcel.d.ts" />
That should work.

Thanks @mischnic, this works for me too! I got @parcel/transformer-typescript-types: Got unexpected undefined before and narrowed that down to using JSX, now with your syntax I don't get "got unexpected undefined" anymore and I don't have to compromise on the typing in the code.

Would be great to document this better since I just stumbled upon this issue randomly while searching for existing reports of another issue that I encountered.

[mischnic]

Indeed 😉 parcel-bundler/website#1059

Though of course Got unexpected undefined shouldn't happen in the first place here and instead probably print a better error.