Module Resolution — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— Module Resolution
📋NodeNext
⚙️Bundler
🔄Exports
✅Patterns
🎯 Next: Test →
Step 1 / 4
Speed
NodeNext
moduleResolution: NodeNext requires .js extensions on imports💡 Analogy
Like giving a delivery address for the finished building, not the construction site — the .ts is the site, .js is the address.
With NodeNext, TypeScript follows Node.js ESM rules: explicit .js extensions required. You write "./utils.js" but TypeScript finds "./utils.ts".
Console Output
> import from "./utils.js" → TypeScript finds utils.ts ✓
> import from "./utils" → Error: no extension (NodeNext)
> import from "./utils.ts" → Error: use .js not .ts
●module-resolution.ts
NodeNextL2–2
1// moduleResolution: NodeNext — requires explicit .js extensions
2import { greet } from './utils.js'; // Even though file is utils.ts!
3 
4// moduleResolution: bundler — no extension required (Vite, webpack)
5import { greet } from './utils';   // Works in bundler projects
6 
7// Export conditions in package.json
8// package.json: "exports": {
9//   ".": {
10//     "import": "./dist/index.mjs",
11//     "require": "./dist/index.cjs",
12//     "types": "./dist/index.d.ts"
13//   }
14// }
15 
16// Path aliases (tsconfig paths + bundler alignment)
17// tsconfig.json: "paths": { "@/*": ["./src/*"] }
18import { UserService } from '@/services/UserService'; // resolves to src/
19 
20// Type-only imports — erased at compile time, no circular deps
21import type { User } from './types';
22import type { Config } from '@/config';
23 
24// Dynamic import — lazy loading + code splitting
25async function loadChart() {
26  const { Chart } = await import('./chart.js');
27  return new Chart();
28}
29 
30// Namespace import — import all exports
31import * as utils from './utils.js';
32utils.greet('World');
32 lines
Timeline — 4 Steps
NodeNext
moduleResolution: NodeNext requires .js extensions on imports💡 Analogy
Like giving a delivery address for the finished building, not the construction site — the .ts is the site, .js is the address.
With NodeNext, TypeScript follows Node.js ESM rules: explicit .js extensions required. You write "./utils.js" but TypeScript finds "./utils.ts".
Console Output
> import from "./utils.js" → TypeScript finds utils.ts ✓
> import from "./utils" → Error: no extension (NodeNext)
> import from "./utils.ts" → Error: use .js not .ts

Was this page helpful?

Discussion

moduleResolution: NodeNext requires .js extensions on imports

💡 Analogy

Like giving a delivery address for the finished building, not the construction site — the .ts is the site, .js is the address.

With NodeNext, TypeScript follows Node.js ESM rules: explicit .js extensions required. You write "./utils.js" but TypeScript finds "./utils.ts".

Console Output

> import from "./utils.js" → TypeScript finds utils.ts ✓
> import from "./utils" → Error: no extension (NodeNext)
> import from "./utils.ts" → Error: use .js not .ts

moduleResolution: NodeNext requires .js extensions on imports

💡 Analogy

Like giving a delivery address for the finished building, not the construction site — the .ts is the site, .js is the address.

With NodeNext, TypeScript follows Node.js ESM rules: explicit .js extensions required. You write "./utils.js" but TypeScript finds "./utils.ts".

Console Output

> import from "./utils.js" → TypeScript finds utils.ts ✓
> import from "./utils" → Error: no extension (NodeNext)
> import from "./utils.ts" → Error: use .js not .ts