A horrifically deep dive into TypeScript module resolution

Getting TypeScript to find the modules you’re importing can be surprisingly tricky. It is controlled by the moduleResolution configuration option, file extensions, and even the syntax you use.

This talk:
1) Breaks down what module resolution means in TypeScript
2) Explains the various options you can set
3) Shows how to debug module resolution problems
4) Dives in maybe a bit too deep to explore how it works in different situations

We also find out about some current resolution shortcomings when using TypeScript with a bundler, along with proposed improvements happening within TypeScript.

00:00 - Introduction
02:18 - What is Module Resolution
05:43 - TypeScript options
07:25 - "Classic" moduleResolution
08:27 - "Node" moduleResolution
11:51 - "Node16" moduleResolution
13:26 - Examples repository
14:09 - Node: Relative
17:48 - Node: Non-relative
20:32 - Node: Package
23:44 - Node: Index
24:28 - Node: JavaScript
29:48 - Node: Mixed JS & TS
32:23 - Node: TypesVersions
37:52 - Node16: New rules
41:34 - Node16: Relative
45:54 - Node16: Export map
53:06 - Ambient types: Definitely Typed
55:26 - Ambient types: typesRoot
56:39 - New moduleResolution options
59:24 - Summary
1:00:09 - Questions

[MaxxxymuM]

An awesome deep dive into the topic of TS modules - thank you!

[DWLance]

16:25 traceResolution 😮 That's a game changer.

bonus points plz

[David-gjdc]

It's so nice to have this well put together focus on a topic like this. The history of modules in JavaScript is very chaotic and not ideal. But this makes it so much easier to grok my way through issues in the future.

[davidsherret]

44:45 I think this was because the language server wasn't picking up the correct tsconfig to use. In the GitHub repo, when I rename tsconfig-extensionless.json to tsconfig.json I get an error in the editor. By the way, great talk!

[homawong]

Note that "typings" vs "types", when under the "exports" field, only "types" is valid. "typings" is not. Cheers

[orenmizr]

such an important topic. very misunderstood. especially for bundler configurations in monorepos.

[wildinsights]

why is it so hard to memorize this shit.

[offroaders]

Ooh another odd one. VSCode doesn't really provide IntelliSense for it, but it does work at the type-level once written out; you can circularly import a file from itself. Sounds weird, and probably means there's some code stink if that's the case. I mostly use it for testing/demos while checking values available from a barrel exports module. Like this: `/* gg.ts */ import { hi as hiTwo } from "./gg.js"; export declare function hi(): void;`