A horrifically deep dive into TypeScript module resolution

Ian VanSchooten explains how TypeScript resolves modules, how to configure moduleResolution, and how to debug common import issues.

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. The examples repository is github.com/IanVS/ts-module-resolution-examples Ian VanSchooten is the lead frontend developer at Defined Networking (defined.net/) and a core Storybook team member focused on Vite and pnpm support. 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 Discord: discord.gg/tmhGfR4Dye Twitter: twitter.com/MiTypeScript Mastodon: fosstodon.org/@MichiganTypeScript Instagram: instagram.com/michigantypescript TikTok: tiktok.com/@michigantypescript