Can’t resolve `@types` when vendoring dependencies for browser ESM imports
See original GitHub issueBug 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
- The Declaration File must be included with an alias, e.g.
import * as THREE from 'three'
- es6 modules require extensions, which the alias does not allow. TypeScript does and will not support URL rewriting.
- As a result, I cannot use Declaration Files + TypeScript without importing additional software
🙂 Expected behavior
There could be multiple possible solutions here:
-
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.
-
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
aliasthree
when it sees./js/lib/three.module.js
Thanks in advance!
Issue Analytics
- State:
- Created a year ago
- Comments:7 (4 by maintainers)
After thinking about it for about 30 seconds, I’m wondering if it needs to be more complicated than
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.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. 😅
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)