Module Resolution
How TypeScript finds your imports.
Finding Files
When you write import { x } from "./utils", how does TypeScript know where to look?
It uses a strategy called 'Module Resolution'. The two modern strategies you need to know are Bundler and NodeNext.
The Extension Problem
If you are using a modern bundler like Next.js or Vite, it's smart enough to resolve ./utils to ./utils.ts or ./utils/index.ts. This is what the "Bundler" strategy simulates.
However, modern Node.js running standard ES Modules is strict. It *requires* the file extension in the import (e.g., import { x } from "./utils.js"). The "NodeNext" strategy enforces this strictness.
Syntax
json
// In tsconfig.json
{
"compilerOptions": {
// If using Vite, Webpack, or Next.js
"moduleResolution": "Bundler",
// If building a raw Node.js library
"moduleResolution": "NodeNext"
}
}
Try it
Trace how the TS Compiler attempts to resolve an extensionless import under the Bundler strategy versus the strict NodeNext strategy.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
moduleResolution: "Bundler"is for projects using Vite, Next.js, or Webpack (extensionless imports allowed).moduleResolution: "NodeNext"is for strict Node environments.- Under
NodeNext, you must import using.jsextensions even for.tsfiles. - Resolution strategies define how the compiler mimics the runtime environment's lookup rules.
Done with this concept?
Mark it complete to track your progress. No login needed.