Can’t resolve `@types` when vendoring dependencies for browser ESM imports

Bug Report

🔎 Search Terms

• native modules alias relative paths
• Relative references must start with either “/”, “./”, or “…/”.

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about declaration files

⏯ Playground Link

N/A (behavior is documented)

💻 Code

Related frustrations have been posted many times before - so I’ve hesitated to post this:

https://github.com/microsoft/TypeScript/issues/16577 https://github.com/microsoft/TypeScript/issues/13422 https://github.com/microsoft/TypeScript/issues/28288 https://github.com/microsoft/TypeScript/issues/42151

My case, and workaround, are documented here: https://stackoverflow.com/questions/67725840/how-can-i-use-threejs-es6-native-modules-with-typescript/73575993#73575993

🙁 Actual behavior

1. The Declaration File must be included with an alias, e.g. import * as THREE from 'three'
2. es6 modules require extensions, which the alias does not allow. TypeScript does and will not support URL rewriting.
3. As a result, I cannot use Declaration Files + TypeScript without importing additional software

🙂 Expected behavior

There could be multiple possible solutions here:

1. Just document it better, here: https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html If this was described as a known limitation, it would have saved me half a day.

2. Support aliases with extensions in one of two ways: a) Allow the alias itself to be of the final expected form ./js/lib/three.module.js b) Allow some sort of a custom mapping, which I can use to tell tsc to look for an .d.ts alias three when it sees ./js/lib/three.module.js

Thanks in advance!

[andrewbranch]

After thinking about it for about 30 seconds, I’m wondering if it needs to be more complicated than

{
  "compilerOptions": {
    "relativePaths": {
      "./node_modules/*": ["./node_modules/*", "./node_modules/@types/*"]
    }
  }
}

where unlike paths, the key side prefix doesn’t need to be an exact string match of the module specifier, but rather a prefix match after both the module specifier and the key are resolved to an absolute directory path. That is, it should match both "./node_modules/foo/index.js" and "../../../node_modules/foo/index.js" as long as both mentions of node_moduels refer to the same directory that the tsconfig mentioned.

[fatcerberus]

this isn’t syntactically valid for browsers

Small nitpick: It is syntactically valid, it’s just semantically invalid (unless the browser supports import maps, as you note). This is just a pet peeve of mine so take it with a grain of salt. 😅

An alternative solution would be to use import maps, although they’re currently Chrome only

Trying to make myself a bit more useful, I wanted to chime in on this that you can use es-module-shims to get import maps working on non-Chromium browsers. I’ve been using this in Oozaru, it works quite well. (@pehrlich2 this might be useful for you as well)