[{"data":1,"prerenderedAt":2691},["ShallowReactive",2],{"page-\u002Fjs\u002F14-modules":3},{"id":4,"title":5,"body":6,"description":2684,"extension":2685,"meta":2686,"navigation":100,"path":2687,"seo":2688,"stem":2689,"__hash__":2690},"content\u002Fjs\u002F14-modules.md","JavaScript 14 — Module Systems: ESM Internals, CommonJS & Dynamic Import",{"type":7,"value":8,"toc":2673},"minimark",[9,14,19,532,536,813,817,1200,1204,1549,1553,1764,1768,2040,2044,2252,2256,2427,2431,2442,2540,2669],[10,11,13],"h1",{"id":12},"_14-module-systems-esm-internals-commonjs-dynamic-import","14 — Module Systems: ESM Internals, CommonJS & Dynamic Import",[15,16,18],"h2",{"id":17},"es-modules-loading-phases-and-live-bindings","ES Modules: Loading Phases and Live Bindings",[20,21,23],"code-wrapper",{"language":22},"javascript",[24,25,29],"pre",{"className":26,"code":27,"language":22,"meta":28,"style":28},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F ── ESM loading has 3 phases (per module, depth-first) ──\n\u002F\u002F 1. CONSTRUCTION: download\u002Fparse all modules in the dependency graph\n\u002F\u002F    - Traverse imports recursively, build the module graph\n\u002F\u002F    - No code executes yet — just parsing\n\u002F\u002F 2. INSTANTIATION: create module environment records and live bindings\n\u002F\u002F    - Allocate memory for exported\u002Fimported bindings\n\u002F\u002F    - Wire up import ↔ export references (live bindings)\n\u002F\u002F 3. EVALUATION: execute module top-level code in dependency order\n\u002F\u002F    - Run the module body (top-level code, not functions)\n\u002F\u002F    - Side effects happen here (console.log, assignments, etc.)\n\n\u002F\u002F ── ESM exports (named and default) ──\n\u002F\u002F math.js:\nexport const PI = 3.14159;          \u002F\u002F named export (live binding)\nexport function add(a, b) { return a + b; }  \u002F\u002F named export (function)\nexport default function multiply(a, b) { return a * b; }  \u002F\u002F default export (one per module)\n\n\u002F\u002F ── ESM imports ──\n\u002F\u002F app.js:\nimport multiply, { PI, add } from \".\u002Fmath.js\";  \u002F\u002F default + named imports\nimport * as math from \".\u002Fmath.js\";              \u002F\u002F namespace import (all exports as an object)\nimport { add as plus } from \".\u002Fmath.js\";        \u002F\u002F rename import\n\nconsole.log(multiply(2, 3));  \u002F\u002F 6 (default export)\nconsole.log(PI);              \u002F\u002F 3.14159 (named export)\nconsole.log(add(1, 2));       \u002F\u002F 3 (named export)\nconsole.log(math.PI);         \u002F\u002F 3.14159 (namespace)\n\n\u002F\u002F ── Live bindings: imports reflect the exporter's current value ──\n\u002F\u002F counter.js:\nexport let count = 0;       \u002F\u002F mutable export binding\nexport function increment() { count++; }  \u002F\u002F modifies the export\n\n\u002F\u002F app.js:\nimport { count, increment } from \".\u002Fcounter.js\";\nconsole.log(count);  \u002F\u002F 0\nincrement();\nconsole.log(count);  \u002F\u002F 1 — live binding! The import reflects the updated value.\n\u002F\u002F In CommonJS, this would be a stale copy (0), because CJS copies the value at import time.\n","",[30,31,32,41,47,53,59,65,71,77,83,89,95,102,108,114,141,184,219,224,230,236,258,282,306,311,341,359,386,404,409,415,421,444,466,471,476,492,505,514,526],"code",{"__ignoreMap":28},[33,34,37],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sdCPZ","\u002F\u002F ── ESM loading has 3 phases (per module, depth-first) ──\n",[33,42,44],{"class":35,"line":43},2,[33,45,46],{"class":39},"\u002F\u002F 1. CONSTRUCTION: download\u002Fparse all modules in the dependency graph\n",[33,48,50],{"class":35,"line":49},3,[33,51,52],{"class":39},"\u002F\u002F    - Traverse imports recursively, build the module graph\n",[33,54,56],{"class":35,"line":55},4,[33,57,58],{"class":39},"\u002F\u002F    - No code executes yet — just parsing\n",[33,60,62],{"class":35,"line":61},5,[33,63,64],{"class":39},"\u002F\u002F 2. INSTANTIATION: create module environment records and live bindings\n",[33,66,68],{"class":35,"line":67},6,[33,69,70],{"class":39},"\u002F\u002F    - Allocate memory for exported\u002Fimported bindings\n",[33,72,74],{"class":35,"line":73},7,[33,75,76],{"class":39},"\u002F\u002F    - Wire up import ↔ export references (live bindings)\n",[33,78,80],{"class":35,"line":79},8,[33,81,82],{"class":39},"\u002F\u002F 3. EVALUATION: execute module top-level code in dependency order\n",[33,84,86],{"class":35,"line":85},9,[33,87,88],{"class":39},"\u002F\u002F    - Run the module body (top-level code, not functions)\n",[33,90,92],{"class":35,"line":91},10,[33,93,94],{"class":39},"\u002F\u002F    - Side effects happen here (console.log, assignments, etc.)\n",[33,96,98],{"class":35,"line":97},11,[33,99,101],{"emptyLinePlaceholder":100},true,"\n",[33,103,105],{"class":35,"line":104},12,[33,106,107],{"class":39},"\u002F\u002F ── ESM exports (named and default) ──\n",[33,109,111],{"class":35,"line":110},13,[33,112,113],{"class":39},"\u002F\u002F math.js:\n",[33,115,117,121,124,128,131,134,138],{"class":35,"line":116},14,[33,118,120],{"class":119},"svdQ7","export",[33,122,123],{"class":119}," const",[33,125,127],{"class":126},"snvgF"," PI",[33,129,130],{"class":119}," =",[33,132,133],{"class":126}," 3.14159",[33,135,137],{"class":136},"ssxIu",";          ",[33,139,140],{"class":39},"\u002F\u002F named export (live binding)\n",[33,142,144,146,149,153,156,160,163,166,169,172,175,178,181],{"class":35,"line":143},15,[33,145,120],{"class":119},[33,147,148],{"class":119}," function",[33,150,152],{"class":151},"sIsaT"," add",[33,154,155],{"class":136},"(",[33,157,159],{"class":158},"sCrzJ","a",[33,161,162],{"class":136},", ",[33,164,165],{"class":158},"b",[33,167,168],{"class":136},") { ",[33,170,171],{"class":119},"return",[33,173,174],{"class":136}," a ",[33,176,177],{"class":119},"+",[33,179,180],{"class":136}," b; }  ",[33,182,183],{"class":39},"\u002F\u002F named export (function)\n",[33,185,187,189,192,194,197,199,201,203,205,207,209,211,214,216],{"class":35,"line":186},16,[33,188,120],{"class":119},[33,190,191],{"class":119}," default",[33,193,148],{"class":119},[33,195,196],{"class":151}," multiply",[33,198,155],{"class":136},[33,200,159],{"class":158},[33,202,162],{"class":136},[33,204,165],{"class":158},[33,206,168],{"class":136},[33,208,171],{"class":119},[33,210,174],{"class":136},[33,212,213],{"class":119},"*",[33,215,180],{"class":136},[33,217,218],{"class":39},"\u002F\u002F default export (one per module)\n",[33,220,222],{"class":35,"line":221},17,[33,223,101],{"emptyLinePlaceholder":100},[33,225,227],{"class":35,"line":226},18,[33,228,229],{"class":39},"\u002F\u002F ── ESM imports ──\n",[33,231,233],{"class":35,"line":232},19,[33,234,235],{"class":39},"\u002F\u002F app.js:\n",[33,237,239,242,245,248,252,255],{"class":35,"line":238},20,[33,240,241],{"class":119},"import",[33,243,244],{"class":136}," multiply, { PI, add } ",[33,246,247],{"class":119},"from",[33,249,251],{"class":250},"sJ6F3"," \".\u002Fmath.js\"",[33,253,254],{"class":136},";  ",[33,256,257],{"class":39},"\u002F\u002F default + named imports\n",[33,259,261,263,266,269,272,274,276,279],{"class":35,"line":260},21,[33,262,241],{"class":119},[33,264,265],{"class":126}," *",[33,267,268],{"class":119}," as",[33,270,271],{"class":136}," math ",[33,273,247],{"class":119},[33,275,251],{"class":250},[33,277,278],{"class":136},";              ",[33,280,281],{"class":39},"\u002F\u002F namespace import (all exports as an object)\n",[33,283,285,287,290,293,296,298,300,303],{"class":35,"line":284},22,[33,286,241],{"class":119},[33,288,289],{"class":136}," { add ",[33,291,292],{"class":119},"as",[33,294,295],{"class":136}," plus } ",[33,297,247],{"class":119},[33,299,251],{"class":250},[33,301,302],{"class":136},";        ",[33,304,305],{"class":39},"\u002F\u002F rename import\n",[33,307,309],{"class":35,"line":308},23,[33,310,101],{"emptyLinePlaceholder":100},[33,312,314,317,320,322,325,327,330,332,335,338],{"class":35,"line":313},24,[33,315,316],{"class":136},"console.",[33,318,319],{"class":151},"log",[33,321,155],{"class":136},[33,323,324],{"class":151},"multiply",[33,326,155],{"class":136},[33,328,329],{"class":126},"2",[33,331,162],{"class":136},[33,333,334],{"class":126},"3",[33,336,337],{"class":136},"));  ",[33,339,340],{"class":39},"\u002F\u002F 6 (default export)\n",[33,342,344,346,348,350,353,356],{"class":35,"line":343},25,[33,345,316],{"class":136},[33,347,319],{"class":151},[33,349,155],{"class":136},[33,351,352],{"class":126},"PI",[33,354,355],{"class":136},");              ",[33,357,358],{"class":39},"\u002F\u002F 3.14159 (named export)\n",[33,360,362,364,366,368,371,373,376,378,380,383],{"class":35,"line":361},26,[33,363,316],{"class":136},[33,365,319],{"class":151},[33,367,155],{"class":136},[33,369,370],{"class":151},"add",[33,372,155],{"class":136},[33,374,375],{"class":126},"1",[33,377,162],{"class":136},[33,379,329],{"class":126},[33,381,382],{"class":136},"));       ",[33,384,385],{"class":39},"\u002F\u002F 3 (named export)\n",[33,387,389,391,393,396,398,401],{"class":35,"line":388},27,[33,390,316],{"class":136},[33,392,319],{"class":151},[33,394,395],{"class":136},"(math.",[33,397,352],{"class":126},[33,399,400],{"class":136},");         ",[33,402,403],{"class":39},"\u002F\u002F 3.14159 (namespace)\n",[33,405,407],{"class":35,"line":406},28,[33,408,101],{"emptyLinePlaceholder":100},[33,410,412],{"class":35,"line":411},29,[33,413,414],{"class":39},"\u002F\u002F ── Live bindings: imports reflect the exporter's current value ──\n",[33,416,418],{"class":35,"line":417},30,[33,419,420],{"class":39},"\u002F\u002F counter.js:\n",[33,422,424,426,429,432,435,438,441],{"class":35,"line":423},31,[33,425,120],{"class":119},[33,427,428],{"class":119}," let",[33,430,431],{"class":136}," count ",[33,433,434],{"class":119},"=",[33,436,437],{"class":126}," 0",[33,439,440],{"class":136},";       ",[33,442,443],{"class":39},"\u002F\u002F mutable export binding\n",[33,445,447,449,451,454,457,460,463],{"class":35,"line":446},32,[33,448,120],{"class":119},[33,450,148],{"class":119},[33,452,453],{"class":151}," increment",[33,455,456],{"class":136},"() { count",[33,458,459],{"class":119},"++",[33,461,462],{"class":136},"; }  ",[33,464,465],{"class":39},"\u002F\u002F modifies the export\n",[33,467,469],{"class":35,"line":468},33,[33,470,101],{"emptyLinePlaceholder":100},[33,472,474],{"class":35,"line":473},34,[33,475,235],{"class":39},[33,477,479,481,484,486,489],{"class":35,"line":478},35,[33,480,241],{"class":119},[33,482,483],{"class":136}," { count, increment } ",[33,485,247],{"class":119},[33,487,488],{"class":250}," \".\u002Fcounter.js\"",[33,490,491],{"class":136},";\n",[33,493,495,497,499,502],{"class":35,"line":494},36,[33,496,316],{"class":136},[33,498,319],{"class":151},[33,500,501],{"class":136},"(count);  ",[33,503,504],{"class":39},"\u002F\u002F 0\n",[33,506,508,511],{"class":35,"line":507},37,[33,509,510],{"class":151},"increment",[33,512,513],{"class":136},"();\n",[33,515,517,519,521,523],{"class":35,"line":516},38,[33,518,316],{"class":136},[33,520,319],{"class":151},[33,522,501],{"class":136},[33,524,525],{"class":39},"\u002F\u002F 1 — live binding! The import reflects the updated value.\n",[33,527,529],{"class":35,"line":528},39,[33,530,531],{"class":39},"\u002F\u002F In CommonJS, this would be a stale copy (0), because CJS copies the value at import time.\n",[15,533,535],{"id":534},"esm-vs-commonjs-the-fundamental-differences","ESM vs CommonJS: The Fundamental Differences",[20,537,538],{"language":22},[24,539,541],{"className":26,"code":540,"language":22,"meta":28,"style":28},"\u002F\u002F ── CommonJS (Node.js, require\u002Fmodule.exports) ──\n\u002F\u002F cjs\u002Fcounter.js:\nlet count = 0;\nfunction increment() { count++; }\nmodule.exports = { count, increment };  \u002F\u002F COPIES current values at export time\n\n\u002F\u002F cjs\u002Fapp.js:\nconst { count, increment } = require(\".\u002Fcounter.js\");\nconsole.log(count);  \u002F\u002F 0\nincrement();          \u002F\u002F increments the module's internal count, NOT the imported copy\nconsole.log(count);  \u002F\u002F 0 — STALE! CJS copies the value at require() time.\n\n\u002F\u002F ── Key differences ──\n\u002F\u002F | Feature        | ESM                           | CommonJS                      |\n\u002F\u002F |---------------|-------------------------------|-------------------------------|\n\u002F\u002F | Loading       | Async (phases)                 | Sync (require blocks)          |\n\u002F\u002F | Bindings      | Live (references)              | Copies (values at import time) |\n\u002F\u002F | Hoisting      | Imports hoisted (TDZ)          | require() runs at call point   |\n\u002F\u002F | `this`        | undefined (module scope)       | module.exports (empty object)  |\n\u002F\u002F | Top-level     | No `this`, `arguments`, `require` | Has all three                 |\n\u002F\u002F | Strict mode   | Always strict                  | Sloppy (unless \"use strict\")   |\n\u002F\u002F | File ext      | .mjs or package.json type:module | .cjs or .js (default)        |\n\u002F\u002F | Cycles        | Live (can work, complex)       | Copies (partial module object) |\n\n\u002F\u002F ── ESM `this` is undefined (not module.exports) ──\n\u002F\u002F ESM module:\nconsole.log(this);  \u002F\u002F undefined (ESM top-level `this` is always undefined)\n\u002F\u002F CommonJS module:\n\u002F\u002F console.log(this);  \u002F\u002F {} (module.exports — empty object, not the real exports)\n\n\u002F\u002F ── ESM doesn't have `require` or `arguments` at top level ──\n\u002F\u002F ESM:\n\u002F\u002F require(\".\u002Ffoo\");        \u002F\u002F ReferenceError: require is not defined\n\u002F\u002F console.log(arguments);  \u002F\u002F ReferenceError: arguments is not defined\n\u002F\u002F To use require in ESM: import { createRequire } from \"module\";\n\u002F\u002F const require = createRequire(import.meta.url);\n",[30,542,543,548,553,566,580,599,603,608,639,649,659,670,674,679,684,689,694,699,704,709,714,719,724,729,733,738,743,760,765,773,777,782,787,795,803,808],{"__ignoreMap":28},[33,544,545],{"class":35,"line":36},[33,546,547],{"class":39},"\u002F\u002F ── CommonJS (Node.js, require\u002Fmodule.exports) ──\n",[33,549,550],{"class":35,"line":43},[33,551,552],{"class":39},"\u002F\u002F cjs\u002Fcounter.js:\n",[33,554,555,558,560,562,564],{"class":35,"line":49},[33,556,557],{"class":119},"let",[33,559,431],{"class":136},[33,561,434],{"class":119},[33,563,437],{"class":126},[33,565,491],{"class":136},[33,567,568,571,573,575,577],{"class":35,"line":55},[33,569,570],{"class":119},"function",[33,572,453],{"class":151},[33,574,456],{"class":136},[33,576,459],{"class":119},[33,578,579],{"class":136},"; }\n",[33,581,582,585,588,591,593,596],{"class":35,"line":61},[33,583,584],{"class":126},"module",[33,586,587],{"class":136},".",[33,589,590],{"class":126},"exports",[33,592,130],{"class":119},[33,594,595],{"class":136}," { count, increment };  ",[33,597,598],{"class":39},"\u002F\u002F COPIES current values at export time\n",[33,600,601],{"class":35,"line":67},[33,602,101],{"emptyLinePlaceholder":100},[33,604,605],{"class":35,"line":73},[33,606,607],{"class":39},"\u002F\u002F cjs\u002Fapp.js:\n",[33,609,610,613,616,619,621,623,626,628,631,633,636],{"class":35,"line":79},[33,611,612],{"class":119},"const",[33,614,615],{"class":136}," { ",[33,617,618],{"class":126},"count",[33,620,162],{"class":136},[33,622,510],{"class":126},[33,624,625],{"class":136}," } ",[33,627,434],{"class":119},[33,629,630],{"class":151}," require",[33,632,155],{"class":136},[33,634,635],{"class":250},"\".\u002Fcounter.js\"",[33,637,638],{"class":136},");\n",[33,640,641,643,645,647],{"class":35,"line":85},[33,642,316],{"class":136},[33,644,319],{"class":151},[33,646,501],{"class":136},[33,648,504],{"class":39},[33,650,651,653,656],{"class":35,"line":91},[33,652,510],{"class":151},[33,654,655],{"class":136},"();          ",[33,657,658],{"class":39},"\u002F\u002F increments the module's internal count, NOT the imported copy\n",[33,660,661,663,665,667],{"class":35,"line":97},[33,662,316],{"class":136},[33,664,319],{"class":151},[33,666,501],{"class":136},[33,668,669],{"class":39},"\u002F\u002F 0 — STALE! CJS copies the value at require() time.\n",[33,671,672],{"class":35,"line":104},[33,673,101],{"emptyLinePlaceholder":100},[33,675,676],{"class":35,"line":110},[33,677,678],{"class":39},"\u002F\u002F ── Key differences ──\n",[33,680,681],{"class":35,"line":116},[33,682,683],{"class":39},"\u002F\u002F | Feature        | ESM                           | CommonJS                      |\n",[33,685,686],{"class":35,"line":143},[33,687,688],{"class":39},"\u002F\u002F |---------------|-------------------------------|-------------------------------|\n",[33,690,691],{"class":35,"line":186},[33,692,693],{"class":39},"\u002F\u002F | Loading       | Async (phases)                 | Sync (require blocks)          |\n",[33,695,696],{"class":35,"line":221},[33,697,698],{"class":39},"\u002F\u002F | Bindings      | Live (references)              | Copies (values at import time) |\n",[33,700,701],{"class":35,"line":226},[33,702,703],{"class":39},"\u002F\u002F | Hoisting      | Imports hoisted (TDZ)          | require() runs at call point   |\n",[33,705,706],{"class":35,"line":232},[33,707,708],{"class":39},"\u002F\u002F | `this`        | undefined (module scope)       | module.exports (empty object)  |\n",[33,710,711],{"class":35,"line":238},[33,712,713],{"class":39},"\u002F\u002F | Top-level     | No `this`, `arguments`, `require` | Has all three                 |\n",[33,715,716],{"class":35,"line":260},[33,717,718],{"class":39},"\u002F\u002F | Strict mode   | Always strict                  | Sloppy (unless \"use strict\")   |\n",[33,720,721],{"class":35,"line":284},[33,722,723],{"class":39},"\u002F\u002F | File ext      | .mjs or package.json type:module | .cjs or .js (default)        |\n",[33,725,726],{"class":35,"line":308},[33,727,728],{"class":39},"\u002F\u002F | Cycles        | Live (can work, complex)       | Copies (partial module object) |\n",[33,730,731],{"class":35,"line":313},[33,732,101],{"emptyLinePlaceholder":100},[33,734,735],{"class":35,"line":343},[33,736,737],{"class":39},"\u002F\u002F ── ESM `this` is undefined (not module.exports) ──\n",[33,739,740],{"class":35,"line":361},[33,741,742],{"class":39},"\u002F\u002F ESM module:\n",[33,744,745,747,749,751,754,757],{"class":35,"line":388},[33,746,316],{"class":136},[33,748,319],{"class":151},[33,750,155],{"class":136},[33,752,753],{"class":126},"this",[33,755,756],{"class":136},");  ",[33,758,759],{"class":39},"\u002F\u002F undefined (ESM top-level `this` is always undefined)\n",[33,761,762],{"class":35,"line":406},[33,763,764],{"class":39},"\u002F\u002F CommonJS module:\n",[33,766,767,770],{"class":35,"line":411},[33,768,769],{"class":39},"\u002F\u002F console.log(this);",[33,771,772],{"class":39},"  \u002F\u002F {} (module.exports — empty object, not the real exports)\n",[33,774,775],{"class":35,"line":417},[33,776,101],{"emptyLinePlaceholder":100},[33,778,779],{"class":35,"line":423},[33,780,781],{"class":39},"\u002F\u002F ── ESM doesn't have `require` or `arguments` at top level ──\n",[33,783,784],{"class":35,"line":446},[33,785,786],{"class":39},"\u002F\u002F ESM:\n",[33,788,789,792],{"class":35,"line":468},[33,790,791],{"class":39},"\u002F\u002F require(\".\u002Ffoo\");",[33,793,794],{"class":39},"        \u002F\u002F ReferenceError: require is not defined\n",[33,796,797,800],{"class":35,"line":473},[33,798,799],{"class":39},"\u002F\u002F console.log(arguments);",[33,801,802],{"class":39},"  \u002F\u002F ReferenceError: arguments is not defined\n",[33,804,805],{"class":35,"line":478},[33,806,807],{"class":39},"\u002F\u002F To use require in ESM: import { createRequire } from \"module\";\n",[33,809,810],{"class":35,"line":494},[33,811,812],{"class":39},"\u002F\u002F const require = createRequire(import.meta.url);\n",[15,814,816],{"id":815},"dynamic-import-and-code-splitting","Dynamic Import and Code Splitting",[20,818,819],{"language":22},[24,820,822],{"className":26,"code":821,"language":22,"meta":28,"style":28},"\u002F\u002F ── Dynamic import: returns a Promise (loads module on demand) ──\n\u002F\u002F Useful for code splitting (lazy loading), conditional loading, and SSR.\n\n\u002F\u002F Static import (loads immediately, part of the module graph):\n\u002F\u002F import heavyLib from \".\u002Fheavy-lib.js\";\n\n\u002F\u002F Dynamic import (loads on demand — code splitting):\nconst button = document.getElementById(\"load-chart\");\nbutton.addEventListener(\"click\", async () => {\n    \u002F\u002F Only loads the chart library when the button is clicked:\n    const { default: Chart } = await import(\".\u002Fchart-lib.js\");\n    new Chart(canvas, { type: \"line\", data: chartData });\n});\n\n\u002F\u002F ── Conditional loading based on environment ──\nasync function getStorage() {\n    if (typeof window !== \"undefined\") {\n        return await import(\".\u002Fbrowser-storage.js\");  \u002F\u002F browser (localStorage)\n    } else {\n        return await import(\".\u002Fnode-storage.js\");       \u002F\u002F Node (fs)\n    }\n}\n\n\u002F\u002F ── Loading multiple modules in parallel ──\nconst [users, posts] = await Promise.all([\n    import(\".\u002Fapi\u002Fusers.js\"),\n    import(\".\u002Fapi\u002Fposts.js\"),\n]);\n\n\u002F\u002F ── import() returns a namespace object (like import * as) ──\nconst module = await import(\".\u002Fmath.js\");\nconsole.log(module.default);  \u002F\u002F default export\nconsole.log(module.add);     \u002F\u002F named export\n",[30,823,824,829,834,838,843,848,852,857,879,906,911,944,961,966,970,975,987,1010,1029,1039,1058,1063,1068,1072,1077,1110,1123,1134,1139,1143,1148,1168,1184],{"__ignoreMap":28},[33,825,826],{"class":35,"line":36},[33,827,828],{"class":39},"\u002F\u002F ── Dynamic import: returns a Promise (loads module on demand) ──\n",[33,830,831],{"class":35,"line":43},[33,832,833],{"class":39},"\u002F\u002F Useful for code splitting (lazy loading), conditional loading, and SSR.\n",[33,835,836],{"class":35,"line":49},[33,837,101],{"emptyLinePlaceholder":100},[33,839,840],{"class":35,"line":55},[33,841,842],{"class":39},"\u002F\u002F Static import (loads immediately, part of the module graph):\n",[33,844,845],{"class":35,"line":61},[33,846,847],{"class":39},"\u002F\u002F import heavyLib from \".\u002Fheavy-lib.js\";\n",[33,849,850],{"class":35,"line":67},[33,851,101],{"emptyLinePlaceholder":100},[33,853,854],{"class":35,"line":73},[33,855,856],{"class":39},"\u002F\u002F Dynamic import (loads on demand — code splitting):\n",[33,858,859,861,864,866,869,872,874,877],{"class":35,"line":79},[33,860,612],{"class":119},[33,862,863],{"class":126}," button",[33,865,130],{"class":119},[33,867,868],{"class":136}," document.",[33,870,871],{"class":151},"getElementById",[33,873,155],{"class":136},[33,875,876],{"class":250},"\"load-chart\"",[33,878,638],{"class":136},[33,880,881,884,887,889,892,894,897,900,903],{"class":35,"line":85},[33,882,883],{"class":136},"button.",[33,885,886],{"class":151},"addEventListener",[33,888,155],{"class":136},[33,890,891],{"class":250},"\"click\"",[33,893,162],{"class":136},[33,895,896],{"class":119},"async",[33,898,899],{"class":136}," () ",[33,901,902],{"class":119},"=>",[33,904,905],{"class":136}," {\n",[33,907,908],{"class":35,"line":91},[33,909,910],{"class":39},"    \u002F\u002F Only loads the chart library when the button is clicked:\n",[33,912,913,916,918,921,924,927,929,931,934,937,939,942],{"class":35,"line":97},[33,914,915],{"class":119},"    const",[33,917,615],{"class":136},[33,919,920],{"class":158},"default",[33,922,923],{"class":136},": ",[33,925,926],{"class":126},"Chart",[33,928,625],{"class":136},[33,930,434],{"class":119},[33,932,933],{"class":119}," await",[33,935,936],{"class":119}," import",[33,938,155],{"class":136},[33,940,941],{"class":250},"\".\u002Fchart-lib.js\"",[33,943,638],{"class":136},[33,945,946,949,952,955,958],{"class":35,"line":104},[33,947,948],{"class":119},"    new",[33,950,951],{"class":151}," Chart",[33,953,954],{"class":136},"(canvas, { type: ",[33,956,957],{"class":250},"\"line\"",[33,959,960],{"class":136},", data: chartData });\n",[33,962,963],{"class":35,"line":110},[33,964,965],{"class":136},"});\n",[33,967,968],{"class":35,"line":116},[33,969,101],{"emptyLinePlaceholder":100},[33,971,972],{"class":35,"line":143},[33,973,974],{"class":39},"\u002F\u002F ── Conditional loading based on environment ──\n",[33,976,977,979,981,984],{"class":35,"line":186},[33,978,896],{"class":119},[33,980,148],{"class":119},[33,982,983],{"class":151}," getStorage",[33,985,986],{"class":136},"() {\n",[33,988,989,992,995,998,1001,1004,1007],{"class":35,"line":221},[33,990,991],{"class":119},"    if",[33,993,994],{"class":136}," (",[33,996,997],{"class":119},"typeof",[33,999,1000],{"class":136}," window ",[33,1002,1003],{"class":119},"!==",[33,1005,1006],{"class":250}," \"undefined\"",[33,1008,1009],{"class":136},") {\n",[33,1011,1012,1015,1017,1019,1021,1024,1026],{"class":35,"line":226},[33,1013,1014],{"class":119},"        return",[33,1016,933],{"class":119},[33,1018,936],{"class":119},[33,1020,155],{"class":136},[33,1022,1023],{"class":250},"\".\u002Fbrowser-storage.js\"",[33,1025,756],{"class":136},[33,1027,1028],{"class":39},"\u002F\u002F browser (localStorage)\n",[33,1030,1031,1034,1037],{"class":35,"line":232},[33,1032,1033],{"class":136},"    } ",[33,1035,1036],{"class":119},"else",[33,1038,905],{"class":136},[33,1040,1041,1043,1045,1047,1049,1052,1055],{"class":35,"line":238},[33,1042,1014],{"class":119},[33,1044,933],{"class":119},[33,1046,936],{"class":119},[33,1048,155],{"class":136},[33,1050,1051],{"class":250},"\".\u002Fnode-storage.js\"",[33,1053,1054],{"class":136},");       ",[33,1056,1057],{"class":39},"\u002F\u002F Node (fs)\n",[33,1059,1060],{"class":35,"line":260},[33,1061,1062],{"class":136},"    }\n",[33,1064,1065],{"class":35,"line":284},[33,1066,1067],{"class":136},"}\n",[33,1069,1070],{"class":35,"line":308},[33,1071,101],{"emptyLinePlaceholder":100},[33,1073,1074],{"class":35,"line":313},[33,1075,1076],{"class":39},"\u002F\u002F ── Loading multiple modules in parallel ──\n",[33,1078,1079,1081,1084,1087,1089,1092,1095,1097,1099,1102,1104,1107],{"class":35,"line":343},[33,1080,612],{"class":119},[33,1082,1083],{"class":136}," [",[33,1085,1086],{"class":126},"users",[33,1088,162],{"class":136},[33,1090,1091],{"class":126},"posts",[33,1093,1094],{"class":136},"] ",[33,1096,434],{"class":119},[33,1098,933],{"class":119},[33,1100,1101],{"class":126}," Promise",[33,1103,587],{"class":136},[33,1105,1106],{"class":151},"all",[33,1108,1109],{"class":136},"([\n",[33,1111,1112,1115,1117,1120],{"class":35,"line":361},[33,1113,1114],{"class":119},"    import",[33,1116,155],{"class":136},[33,1118,1119],{"class":250},"\".\u002Fapi\u002Fusers.js\"",[33,1121,1122],{"class":136},"),\n",[33,1124,1125,1127,1129,1132],{"class":35,"line":388},[33,1126,1114],{"class":119},[33,1128,155],{"class":136},[33,1130,1131],{"class":250},"\".\u002Fapi\u002Fposts.js\"",[33,1133,1122],{"class":136},[33,1135,1136],{"class":35,"line":406},[33,1137,1138],{"class":136},"]);\n",[33,1140,1141],{"class":35,"line":411},[33,1142,101],{"emptyLinePlaceholder":100},[33,1144,1145],{"class":35,"line":417},[33,1146,1147],{"class":39},"\u002F\u002F ── import() returns a namespace object (like import * as) ──\n",[33,1149,1150,1152,1155,1157,1159,1161,1163,1166],{"class":35,"line":423},[33,1151,612],{"class":119},[33,1153,1154],{"class":126}," module",[33,1156,130],{"class":119},[33,1158,933],{"class":119},[33,1160,936],{"class":119},[33,1162,155],{"class":136},[33,1164,1165],{"class":250},"\".\u002Fmath.js\"",[33,1167,638],{"class":136},[33,1169,1170,1172,1174,1176,1178,1181],{"class":35,"line":446},[33,1171,316],{"class":136},[33,1173,319],{"class":151},[33,1175,155],{"class":136},[33,1177,584],{"class":126},[33,1179,1180],{"class":136},".default);  ",[33,1182,1183],{"class":39},"\u002F\u002F default export\n",[33,1185,1186,1188,1190,1192,1194,1197],{"class":35,"line":468},[33,1187,316],{"class":136},[33,1189,319],{"class":151},[33,1191,155],{"class":136},[33,1193,584],{"class":126},[33,1195,1196],{"class":136},".add);     ",[33,1198,1199],{"class":39},"\u002F\u002F named export\n",[15,1201,1203],{"id":1202},"circular-dependencies","Circular Dependencies",[20,1205,1206],{"language":22},[24,1207,1209],{"className":26,"code":1208,"language":22,"meta":28,"style":28},"\u002F\u002F ── Circular dependency: A imports B, B imports A ──\n\u002F\u002F ESM handles cycles with live bindings (but can be tricky):\n\u002F\u002F a.js:\nimport { b } from \".\u002Fb.js\";\nexport const a = 1;\nexport function useB() { return b; }  \u002F\u002F function delays access to b (b is available at call time)\n\n\u002F\u002F b.js:\nimport { a } from \".\u002Fa.js\";\nexport const b = 2;\nexport function useA() { return a; }  \u002F\u002F function delays access to a (available at call time)\n\n\u002F\u002F app.js:\nimport { a, useB } from \".\u002Fa.js\";\nconsole.log(a);    \u002F\u002F 1 (a is fully evaluated)\nconsole.log(useB());  \u002F\u002F 2 (b is available — the function runs after both modules are evaluated)\n\u002F\u002F ⚠️ If b.js tried to use `a` at the top level (not in a function), it might get undefined\n\u002F\u002F during the cycle (a isn't evaluated yet when b.js runs).\n\n\u002F\u002F ── CommonJS circular dependency: partial exports ──\n\u002F\u002F cjs\u002Fa.js:\nconst { b } = require(\".\u002Fb.js\");  \u002F\u002F at this point, b.js hasn't finished executing\nmodule.exports.a = 1;             \u002F\u002F a is set after require returns\n\n\u002F\u002F cjs\u002Fb.js:\nconst { a } = require(\".\u002Fa.js\");  \u002F\u002F a is undefined! (a.js hasn't set module.exports.a yet)\nmodule.exports.b = a + 1;         \u002F\u002F NaN (undefined + 1)\n\u002F\u002F CJS: require() returns the PARTIAL module.exports object (what's been set so far).\n\u002F\u002F To avoid: defer access to functions (not top-level).\n\n\u002F\u002F ── Best practice: avoid circular dependencies (refactor shared code to a third module) ──\n\u002F\u002F If A and B both need each other, extract the shared logic to C:\n\u002F\u002F a.js → imports from c.js\n\u002F\u002F b.js → imports from c.js\n\u002F\u002F No cycle.\n",[30,1210,1211,1216,1221,1226,1240,1256,1275,1279,1284,1298,1314,1333,1337,1341,1354,1366,1383,1388,1393,1397,1402,1407,1431,1452,1456,1461,1485,1510,1515,1520,1524,1529,1534,1539,1544],{"__ignoreMap":28},[33,1212,1213],{"class":35,"line":36},[33,1214,1215],{"class":39},"\u002F\u002F ── Circular dependency: A imports B, B imports A ──\n",[33,1217,1218],{"class":35,"line":43},[33,1219,1220],{"class":39},"\u002F\u002F ESM handles cycles with live bindings (but can be tricky):\n",[33,1222,1223],{"class":35,"line":49},[33,1224,1225],{"class":39},"\u002F\u002F a.js:\n",[33,1227,1228,1230,1233,1235,1238],{"class":35,"line":55},[33,1229,241],{"class":119},[33,1231,1232],{"class":136}," { b } ",[33,1234,247],{"class":119},[33,1236,1237],{"class":250}," \".\u002Fb.js\"",[33,1239,491],{"class":136},[33,1241,1242,1244,1246,1249,1251,1254],{"class":35,"line":61},[33,1243,120],{"class":119},[33,1245,123],{"class":119},[33,1247,1248],{"class":126}," a",[33,1250,130],{"class":119},[33,1252,1253],{"class":126}," 1",[33,1255,491],{"class":136},[33,1257,1258,1260,1262,1265,1268,1270,1272],{"class":35,"line":67},[33,1259,120],{"class":119},[33,1261,148],{"class":119},[33,1263,1264],{"class":151}," useB",[33,1266,1267],{"class":136},"() { ",[33,1269,171],{"class":119},[33,1271,180],{"class":136},[33,1273,1274],{"class":39},"\u002F\u002F function delays access to b (b is available at call time)\n",[33,1276,1277],{"class":35,"line":73},[33,1278,101],{"emptyLinePlaceholder":100},[33,1280,1281],{"class":35,"line":79},[33,1282,1283],{"class":39},"\u002F\u002F b.js:\n",[33,1285,1286,1288,1291,1293,1296],{"class":35,"line":85},[33,1287,241],{"class":119},[33,1289,1290],{"class":136}," { a } ",[33,1292,247],{"class":119},[33,1294,1295],{"class":250}," \".\u002Fa.js\"",[33,1297,491],{"class":136},[33,1299,1300,1302,1304,1307,1309,1312],{"class":35,"line":91},[33,1301,120],{"class":119},[33,1303,123],{"class":119},[33,1305,1306],{"class":126}," b",[33,1308,130],{"class":119},[33,1310,1311],{"class":126}," 2",[33,1313,491],{"class":136},[33,1315,1316,1318,1320,1323,1325,1327,1330],{"class":35,"line":97},[33,1317,120],{"class":119},[33,1319,148],{"class":119},[33,1321,1322],{"class":151}," useA",[33,1324,1267],{"class":136},[33,1326,171],{"class":119},[33,1328,1329],{"class":136}," a; }  ",[33,1331,1332],{"class":39},"\u002F\u002F function delays access to a (available at call time)\n",[33,1334,1335],{"class":35,"line":104},[33,1336,101],{"emptyLinePlaceholder":100},[33,1338,1339],{"class":35,"line":110},[33,1340,235],{"class":39},[33,1342,1343,1345,1348,1350,1352],{"class":35,"line":116},[33,1344,241],{"class":119},[33,1346,1347],{"class":136}," { a, useB } ",[33,1349,247],{"class":119},[33,1351,1295],{"class":250},[33,1353,491],{"class":136},[33,1355,1356,1358,1360,1363],{"class":35,"line":143},[33,1357,316],{"class":136},[33,1359,319],{"class":151},[33,1361,1362],{"class":136},"(a);    ",[33,1364,1365],{"class":39},"\u002F\u002F 1 (a is fully evaluated)\n",[33,1367,1368,1370,1372,1374,1377,1380],{"class":35,"line":186},[33,1369,316],{"class":136},[33,1371,319],{"class":151},[33,1373,155],{"class":136},[33,1375,1376],{"class":151},"useB",[33,1378,1379],{"class":136},"());  ",[33,1381,1382],{"class":39},"\u002F\u002F 2 (b is available — the function runs after both modules are evaluated)\n",[33,1384,1385],{"class":35,"line":221},[33,1386,1387],{"class":39},"\u002F\u002F ⚠️ If b.js tried to use `a` at the top level (not in a function), it might get undefined\n",[33,1389,1390],{"class":35,"line":226},[33,1391,1392],{"class":39},"\u002F\u002F during the cycle (a isn't evaluated yet when b.js runs).\n",[33,1394,1395],{"class":35,"line":232},[33,1396,101],{"emptyLinePlaceholder":100},[33,1398,1399],{"class":35,"line":238},[33,1400,1401],{"class":39},"\u002F\u002F ── CommonJS circular dependency: partial exports ──\n",[33,1403,1404],{"class":35,"line":260},[33,1405,1406],{"class":39},"\u002F\u002F cjs\u002Fa.js:\n",[33,1408,1409,1411,1413,1415,1417,1419,1421,1423,1426,1428],{"class":35,"line":284},[33,1410,612],{"class":119},[33,1412,615],{"class":136},[33,1414,165],{"class":126},[33,1416,625],{"class":136},[33,1418,434],{"class":119},[33,1420,630],{"class":151},[33,1422,155],{"class":136},[33,1424,1425],{"class":250},"\".\u002Fb.js\"",[33,1427,756],{"class":136},[33,1429,1430],{"class":39},"\u002F\u002F at this point, b.js hasn't finished executing\n",[33,1432,1433,1435,1437,1439,1442,1444,1446,1449],{"class":35,"line":308},[33,1434,584],{"class":126},[33,1436,587],{"class":136},[33,1438,590],{"class":126},[33,1440,1441],{"class":136},".a ",[33,1443,434],{"class":119},[33,1445,1253],{"class":126},[33,1447,1448],{"class":136},";             ",[33,1450,1451],{"class":39},"\u002F\u002F a is set after require returns\n",[33,1453,1454],{"class":35,"line":313},[33,1455,101],{"emptyLinePlaceholder":100},[33,1457,1458],{"class":35,"line":343},[33,1459,1460],{"class":39},"\u002F\u002F cjs\u002Fb.js:\n",[33,1462,1463,1465,1467,1469,1471,1473,1475,1477,1480,1482],{"class":35,"line":361},[33,1464,612],{"class":119},[33,1466,615],{"class":136},[33,1468,159],{"class":126},[33,1470,625],{"class":136},[33,1472,434],{"class":119},[33,1474,630],{"class":151},[33,1476,155],{"class":136},[33,1478,1479],{"class":250},"\".\u002Fa.js\"",[33,1481,756],{"class":136},[33,1483,1484],{"class":39},"\u002F\u002F a is undefined! (a.js hasn't set module.exports.a yet)\n",[33,1486,1487,1489,1491,1493,1496,1498,1500,1502,1504,1507],{"class":35,"line":388},[33,1488,584],{"class":126},[33,1490,587],{"class":136},[33,1492,590],{"class":126},[33,1494,1495],{"class":136},".b ",[33,1497,434],{"class":119},[33,1499,174],{"class":136},[33,1501,177],{"class":119},[33,1503,1253],{"class":126},[33,1505,1506],{"class":136},";         ",[33,1508,1509],{"class":39},"\u002F\u002F NaN (undefined + 1)\n",[33,1511,1512],{"class":35,"line":406},[33,1513,1514],{"class":39},"\u002F\u002F CJS: require() returns the PARTIAL module.exports object (what's been set so far).\n",[33,1516,1517],{"class":35,"line":411},[33,1518,1519],{"class":39},"\u002F\u002F To avoid: defer access to functions (not top-level).\n",[33,1521,1522],{"class":35,"line":417},[33,1523,101],{"emptyLinePlaceholder":100},[33,1525,1526],{"class":35,"line":423},[33,1527,1528],{"class":39},"\u002F\u002F ── Best practice: avoid circular dependencies (refactor shared code to a third module) ──\n",[33,1530,1531],{"class":35,"line":446},[33,1532,1533],{"class":39},"\u002F\u002F If A and B both need each other, extract the shared logic to C:\n",[33,1535,1536],{"class":35,"line":468},[33,1537,1538],{"class":39},"\u002F\u002F a.js → imports from c.js\n",[33,1540,1541],{"class":35,"line":473},[33,1542,1543],{"class":39},"\u002F\u002F b.js → imports from c.js\n",[33,1545,1546],{"class":35,"line":478},[33,1547,1548],{"class":39},"\u002F\u002F No cycle.\n",[15,1550,1552],{"id":1551},"re-exports-and-barrel-files","Re-exports and Barrel Files",[20,1554,1555],{"language":22},[24,1556,1558],{"className":26,"code":1557,"language":22,"meta":28,"style":28},"\u002F\u002F ── Re-export: forward exports from another module ──\n\n\u002F\u002F utils\u002Findex.js (barrel file — re-exports from multiple files):\nexport { add, subtract } from \".\u002Fmath.js\";      \u002F\u002F named re-export\nexport * as math from \".\u002Fmath.js\";               \u002F\u002F namespace re-export\nexport { default as MathUtils } from \".\u002Fmath.js\"; \u002F\u002F rename default to named\nexport { default } from \".\u002Fdefault-thing.js\";    \u002F\u002F re-export default as default\n\n\u002F\u002F ── Import from the barrel (single import point) ──\n\u002F\u002F app.js:\nimport { add, math, MathUtils } from \".\u002Futils\u002Findex.js\";\n\n\u002F\u002F ┚ Barrel files simplify imports but can prevent tree-shaking (bundler loads all re-exports)\n\u002F\u002F For tree-shaking: import directly from the source module, not the barrel.\n\n\u002F\u002F ── package.json exports (modern package entry points) ──\n\u002F\u002F package.json:\n\u002F\u002F {\n\u002F\u002F   \"exports\": {\n\u002F\u002F     \".\": \".\u002Fdist\u002Findex.js\",              \u002F\u002F main entry: import pkg from \"pkg\"\n\u002F\u002F     \".\u002Futils\": \".\u002Fdist\u002Futils.js\",        \u002F\u002F subpath: import { x } from \"pkg\u002Futils\"\n\u002F\u002F     \".\u002Fpackage.json\": \".\u002Fpackage.json\"   \u002F\u002F allow importing package.json\n\u002F\u002F   }\n\u002F\u002F }\n\u002F\u002F `exports` restricts what can be imported — only listed paths are public.\n\u002F\u002F Older `main` field is the fallback if `exports` isn't set.\n",[30,1559,1560,1565,1569,1574,1591,1611,1634,1655,1659,1664,1668,1682,1686,1691,1696,1700,1705,1710,1715,1720,1728,1736,1744,1749,1754,1759],{"__ignoreMap":28},[33,1561,1562],{"class":35,"line":36},[33,1563,1564],{"class":39},"\u002F\u002F ── Re-export: forward exports from another module ──\n",[33,1566,1567],{"class":35,"line":43},[33,1568,101],{"emptyLinePlaceholder":100},[33,1570,1571],{"class":35,"line":49},[33,1572,1573],{"class":39},"\u002F\u002F utils\u002Findex.js (barrel file — re-exports from multiple files):\n",[33,1575,1576,1578,1581,1583,1585,1588],{"class":35,"line":55},[33,1577,120],{"class":119},[33,1579,1580],{"class":136}," { add, subtract } ",[33,1582,247],{"class":119},[33,1584,251],{"class":250},[33,1586,1587],{"class":136},";      ",[33,1589,1590],{"class":39},"\u002F\u002F named re-export\n",[33,1592,1593,1595,1597,1599,1601,1603,1605,1608],{"class":35,"line":61},[33,1594,120],{"class":119},[33,1596,265],{"class":126},[33,1598,268],{"class":119},[33,1600,271],{"class":136},[33,1602,247],{"class":119},[33,1604,251],{"class":250},[33,1606,1607],{"class":136},";               ",[33,1609,1610],{"class":39},"\u002F\u002F namespace re-export\n",[33,1612,1613,1615,1617,1619,1621,1624,1626,1628,1631],{"class":35,"line":67},[33,1614,120],{"class":119},[33,1616,615],{"class":136},[33,1618,920],{"class":119},[33,1620,268],{"class":119},[33,1622,1623],{"class":136}," MathUtils } ",[33,1625,247],{"class":119},[33,1627,251],{"class":250},[33,1629,1630],{"class":136},"; ",[33,1632,1633],{"class":39},"\u002F\u002F rename default to named\n",[33,1635,1636,1638,1640,1642,1644,1646,1649,1652],{"class":35,"line":73},[33,1637,120],{"class":119},[33,1639,615],{"class":136},[33,1641,920],{"class":119},[33,1643,625],{"class":136},[33,1645,247],{"class":119},[33,1647,1648],{"class":250}," \".\u002Fdefault-thing.js\"",[33,1650,1651],{"class":136},";    ",[33,1653,1654],{"class":39},"\u002F\u002F re-export default as default\n",[33,1656,1657],{"class":35,"line":79},[33,1658,101],{"emptyLinePlaceholder":100},[33,1660,1661],{"class":35,"line":85},[33,1662,1663],{"class":39},"\u002F\u002F ── Import from the barrel (single import point) ──\n",[33,1665,1666],{"class":35,"line":91},[33,1667,235],{"class":39},[33,1669,1670,1672,1675,1677,1680],{"class":35,"line":97},[33,1671,241],{"class":119},[33,1673,1674],{"class":136}," { add, math, MathUtils } ",[33,1676,247],{"class":119},[33,1678,1679],{"class":250}," \".\u002Futils\u002Findex.js\"",[33,1681,491],{"class":136},[33,1683,1684],{"class":35,"line":104},[33,1685,101],{"emptyLinePlaceholder":100},[33,1687,1688],{"class":35,"line":110},[33,1689,1690],{"class":39},"\u002F\u002F ┚ Barrel files simplify imports but can prevent tree-shaking (bundler loads all re-exports)\n",[33,1692,1693],{"class":35,"line":116},[33,1694,1695],{"class":39},"\u002F\u002F For tree-shaking: import directly from the source module, not the barrel.\n",[33,1697,1698],{"class":35,"line":143},[33,1699,101],{"emptyLinePlaceholder":100},[33,1701,1702],{"class":35,"line":186},[33,1703,1704],{"class":39},"\u002F\u002F ── package.json exports (modern package entry points) ──\n",[33,1706,1707],{"class":35,"line":221},[33,1708,1709],{"class":39},"\u002F\u002F package.json:\n",[33,1711,1712],{"class":35,"line":226},[33,1713,1714],{"class":39},"\u002F\u002F {\n",[33,1716,1717],{"class":35,"line":232},[33,1718,1719],{"class":39},"\u002F\u002F   \"exports\": {\n",[33,1721,1722,1725],{"class":35,"line":238},[33,1723,1724],{"class":39},"\u002F\u002F     \".\": \".\u002Fdist\u002Findex.js\",",[33,1726,1727],{"class":39},"              \u002F\u002F main entry: import pkg from \"pkg\"\n",[33,1729,1730,1733],{"class":35,"line":260},[33,1731,1732],{"class":39},"\u002F\u002F     \".\u002Futils\": \".\u002Fdist\u002Futils.js\",",[33,1734,1735],{"class":39},"        \u002F\u002F subpath: import { x } from \"pkg\u002Futils\"\n",[33,1737,1738,1741],{"class":35,"line":284},[33,1739,1740],{"class":39},"\u002F\u002F     \".\u002Fpackage.json\": \".\u002Fpackage.json\"",[33,1742,1743],{"class":39},"   \u002F\u002F allow importing package.json\n",[33,1745,1746],{"class":35,"line":308},[33,1747,1748],{"class":39},"\u002F\u002F   }\n",[33,1750,1751],{"class":35,"line":313},[33,1752,1753],{"class":39},"\u002F\u002F }\n",[33,1755,1756],{"class":35,"line":343},[33,1757,1758],{"class":39},"\u002F\u002F `exports` restricts what can be imported — only listed paths are public.\n",[33,1760,1761],{"class":35,"line":361},[33,1762,1763],{"class":39},"\u002F\u002F Older `main` field is the fallback if `exports` isn't set.\n",[15,1765,1767],{"id":1766},"production-pattern-feature-flagged-module-loading","Production Pattern: Feature-Flagged Module Loading",[20,1769,1770],{"language":22},[24,1771,1773],{"className":26,"code":1772,"language":22,"meta":28,"style":28},"\u002F\u002F ── Load modules conditionally based on feature flags ──\nconst featureFlags = {\n    newDashboard: true,\n    legacyCharts: false,\n};\n\nasync function loadDashboard() {\n    if (featureFlags.newDashboard) {\n        \u002F\u002F Dynamic import: only loads the new dashboard if the flag is on\n        const { renderDashboard } = await import(\".\u002Fnew-dashboard.js\");\n        return renderDashboard;\n    } else {\n        const { renderDashboard } = await import(\".\u002Fold-dashboard.js\");\n        return renderDashboard;\n    }\n}\n\n\u002F\u002F ── Progressive loading: load critical path first, then lazy-load ──\nasync function bootstrap() {\n    \u002F\u002F Critical path: load immediately (static imports at top of file)\n    \u002F\u002F import { render } from \".\u002Fcore.js\";\n\n    \u002F\u002F Non-critical: load after first paint\n    await import(\".\u002Fanalytics.js\").then(({ init }) => init());\n    await import(\".\u002Ferror-reporting.js\").then(({ init }) => init());\n\n    \u002F\u002F User-triggered: load on demand (button click, route change)\n    \u002F\u002F await import(\".\u002Fheavy-feature.js\") when user clicks the feature\n}\n",[30,1774,1775,1780,1791,1802,1812,1817,1821,1832,1839,1844,1869,1876,1884,1907,1913,1917,1921,1925,1930,1941,1946,1951,1955,1960,1995,2022,2026,2031,2036],{"__ignoreMap":28},[33,1776,1777],{"class":35,"line":36},[33,1778,1779],{"class":39},"\u002F\u002F ── Load modules conditionally based on feature flags ──\n",[33,1781,1782,1784,1787,1789],{"class":35,"line":43},[33,1783,612],{"class":119},[33,1785,1786],{"class":126}," featureFlags",[33,1788,130],{"class":119},[33,1790,905],{"class":136},[33,1792,1793,1796,1799],{"class":35,"line":49},[33,1794,1795],{"class":136},"    newDashboard: ",[33,1797,1798],{"class":126},"true",[33,1800,1801],{"class":136},",\n",[33,1803,1804,1807,1810],{"class":35,"line":55},[33,1805,1806],{"class":136},"    legacyCharts: ",[33,1808,1809],{"class":126},"false",[33,1811,1801],{"class":136},[33,1813,1814],{"class":35,"line":61},[33,1815,1816],{"class":136},"};\n",[33,1818,1819],{"class":35,"line":67},[33,1820,101],{"emptyLinePlaceholder":100},[33,1822,1823,1825,1827,1830],{"class":35,"line":73},[33,1824,896],{"class":119},[33,1826,148],{"class":119},[33,1828,1829],{"class":151}," loadDashboard",[33,1831,986],{"class":136},[33,1833,1834,1836],{"class":35,"line":79},[33,1835,991],{"class":119},[33,1837,1838],{"class":136}," (featureFlags.newDashboard) {\n",[33,1840,1841],{"class":35,"line":85},[33,1842,1843],{"class":39},"        \u002F\u002F Dynamic import: only loads the new dashboard if the flag is on\n",[33,1845,1846,1849,1851,1854,1856,1858,1860,1862,1864,1867],{"class":35,"line":91},[33,1847,1848],{"class":119},"        const",[33,1850,615],{"class":136},[33,1852,1853],{"class":126},"renderDashboard",[33,1855,625],{"class":136},[33,1857,434],{"class":119},[33,1859,933],{"class":119},[33,1861,936],{"class":119},[33,1863,155],{"class":136},[33,1865,1866],{"class":250},"\".\u002Fnew-dashboard.js\"",[33,1868,638],{"class":136},[33,1870,1871,1873],{"class":35,"line":97},[33,1872,1014],{"class":119},[33,1874,1875],{"class":136}," renderDashboard;\n",[33,1877,1878,1880,1882],{"class":35,"line":104},[33,1879,1033],{"class":136},[33,1881,1036],{"class":119},[33,1883,905],{"class":136},[33,1885,1886,1888,1890,1892,1894,1896,1898,1900,1902,1905],{"class":35,"line":110},[33,1887,1848],{"class":119},[33,1889,615],{"class":136},[33,1891,1853],{"class":126},[33,1893,625],{"class":136},[33,1895,434],{"class":119},[33,1897,933],{"class":119},[33,1899,936],{"class":119},[33,1901,155],{"class":136},[33,1903,1904],{"class":250},"\".\u002Fold-dashboard.js\"",[33,1906,638],{"class":136},[33,1908,1909,1911],{"class":35,"line":116},[33,1910,1014],{"class":119},[33,1912,1875],{"class":136},[33,1914,1915],{"class":35,"line":143},[33,1916,1062],{"class":136},[33,1918,1919],{"class":35,"line":186},[33,1920,1067],{"class":136},[33,1922,1923],{"class":35,"line":221},[33,1924,101],{"emptyLinePlaceholder":100},[33,1926,1927],{"class":35,"line":226},[33,1928,1929],{"class":39},"\u002F\u002F ── Progressive loading: load critical path first, then lazy-load ──\n",[33,1931,1932,1934,1936,1939],{"class":35,"line":232},[33,1933,896],{"class":119},[33,1935,148],{"class":119},[33,1937,1938],{"class":151}," bootstrap",[33,1940,986],{"class":136},[33,1942,1943],{"class":35,"line":238},[33,1944,1945],{"class":39},"    \u002F\u002F Critical path: load immediately (static imports at top of file)\n",[33,1947,1948],{"class":35,"line":260},[33,1949,1950],{"class":39},"    \u002F\u002F import { render } from \".\u002Fcore.js\";\n",[33,1952,1953],{"class":35,"line":284},[33,1954,101],{"emptyLinePlaceholder":100},[33,1956,1957],{"class":35,"line":308},[33,1958,1959],{"class":39},"    \u002F\u002F Non-critical: load after first paint\n",[33,1961,1962,1965,1967,1969,1972,1975,1978,1981,1984,1987,1989,1992],{"class":35,"line":313},[33,1963,1964],{"class":119},"    await",[33,1966,936],{"class":119},[33,1968,155],{"class":136},[33,1970,1971],{"class":250},"\".\u002Fanalytics.js\"",[33,1973,1974],{"class":136},").",[33,1976,1977],{"class":151},"then",[33,1979,1980],{"class":136},"(({ ",[33,1982,1983],{"class":158},"init",[33,1985,1986],{"class":136}," }) ",[33,1988,902],{"class":119},[33,1990,1991],{"class":151}," init",[33,1993,1994],{"class":136},"());\n",[33,1996,1997,1999,2001,2003,2006,2008,2010,2012,2014,2016,2018,2020],{"class":35,"line":343},[33,1998,1964],{"class":119},[33,2000,936],{"class":119},[33,2002,155],{"class":136},[33,2004,2005],{"class":250},"\".\u002Ferror-reporting.js\"",[33,2007,1974],{"class":136},[33,2009,1977],{"class":151},[33,2011,1980],{"class":136},[33,2013,1983],{"class":158},[33,2015,1986],{"class":136},[33,2017,902],{"class":119},[33,2019,1991],{"class":151},[33,2021,1994],{"class":136},[33,2023,2024],{"class":35,"line":361},[33,2025,101],{"emptyLinePlaceholder":100},[33,2027,2028],{"class":35,"line":388},[33,2029,2030],{"class":39},"    \u002F\u002F User-triggered: load on demand (button click, route change)\n",[33,2032,2033],{"class":35,"line":406},[33,2034,2035],{"class":39},"    \u002F\u002F await import(\".\u002Fheavy-feature.js\") when user clicks the feature\n",[33,2037,2038],{"class":35,"line":411},[33,2039,1067],{"class":136},[15,2041,2043],{"id":2042},"tips-tricks","💡 Tips & Tricks",[20,2045,2046],{"language":22},[24,2047,2049],{"className":26,"code":2048,"language":22,"meta":28,"style":28},"\u002F\u002F ── `import.meta` for module metadata (ESM only) ──\nconsole.log(import.meta.url);  \u002F\u002F full URL of the current module\n\u002F\u002F Node: file:\u002F\u002F\u002Fpath\u002Fto\u002Fmodule.js\n\u002F\u002F Browser: https:\u002F\u002Fexample.com\u002Fmodule.js\n\n\u002F\u002F ── Top-level await (ES2022, ESM only) ──\n\u002F\u002F In ESM, you can use await at the top level (no async wrapper needed):\n\u002F\u002F const config = await fetch(\"\u002Fconfig.json\").then(r => r.json());\n\u002F\u002F export default config;\n\u002F\u002F ⚠️ Top-level await blocks all modules that depend on this one (they wait for it to resolve).\n\n\u002F\u002F ── `createRequire` for using CJS modules in ESM (Node) ──\nimport { createRequire } from \"module\";\nconst require = createRequire(import.meta.url);\nconst cjsModule = require(\".\u002Fcjs-module.cjs\");  \u002F\u002F load a CommonJS module from ESM\n\n\u002F\u002F ── Tree-shaking: named exports enable static analysis ──\n\u002F\u002F Bundlers (Vite, esbuild, Rollup) can remove unused exports (tree-shaking):\nimport { used } from \".\u002Fmodule.js\";  \u002F\u002F ✓ only `used` is bundled\nimport unused from \".\u002Fmodule.js\";   \u002F\u002F default import — bundler can't tree-shake (whole module loaded)\n\u002F\u002F Named imports + ESM = tree-shakeable. CommonJS = not tree-shakeable (require is dynamic).\n\n\u002F\u002F ── `import type` for TypeScript (compile-time only, erased at runtime) ──\n\u002F\u002F import type { User, Config } from \".\u002Ftypes.js\";  \u002F\u002F types only — erased by the bundler\n",[30,2050,2051,2056,2077,2082,2087,2091,2096,2101,2106,2111,2116,2120,2125,2139,2161,2182,2186,2191,2196,2213,2230,2235,2239,2244],{"__ignoreMap":28},[33,2052,2053],{"class":35,"line":36},[33,2054,2055],{"class":39},"\u002F\u002F ── `import.meta` for module metadata (ESM only) ──\n",[33,2057,2058,2060,2062,2064,2066,2068,2071,2074],{"class":35,"line":43},[33,2059,316],{"class":136},[33,2061,319],{"class":151},[33,2063,155],{"class":136},[33,2065,241],{"class":119},[33,2067,587],{"class":136},[33,2069,2070],{"class":126},"meta",[33,2072,2073],{"class":136},".url);  ",[33,2075,2076],{"class":39},"\u002F\u002F full URL of the current module\n",[33,2078,2079],{"class":35,"line":49},[33,2080,2081],{"class":39},"\u002F\u002F Node: file:\u002F\u002F\u002Fpath\u002Fto\u002Fmodule.js\n",[33,2083,2084],{"class":35,"line":55},[33,2085,2086],{"class":39},"\u002F\u002F Browser: https:\u002F\u002Fexample.com\u002Fmodule.js\n",[33,2088,2089],{"class":35,"line":61},[33,2090,101],{"emptyLinePlaceholder":100},[33,2092,2093],{"class":35,"line":67},[33,2094,2095],{"class":39},"\u002F\u002F ── Top-level await (ES2022, ESM only) ──\n",[33,2097,2098],{"class":35,"line":73},[33,2099,2100],{"class":39},"\u002F\u002F In ESM, you can use await at the top level (no async wrapper needed):\n",[33,2102,2103],{"class":35,"line":79},[33,2104,2105],{"class":39},"\u002F\u002F const config = await fetch(\"\u002Fconfig.json\").then(r => r.json());\n",[33,2107,2108],{"class":35,"line":85},[33,2109,2110],{"class":39},"\u002F\u002F export default config;\n",[33,2112,2113],{"class":35,"line":91},[33,2114,2115],{"class":39},"\u002F\u002F ⚠️ Top-level await blocks all modules that depend on this one (they wait for it to resolve).\n",[33,2117,2118],{"class":35,"line":97},[33,2119,101],{"emptyLinePlaceholder":100},[33,2121,2122],{"class":35,"line":104},[33,2123,2124],{"class":39},"\u002F\u002F ── `createRequire` for using CJS modules in ESM (Node) ──\n",[33,2126,2127,2129,2132,2134,2137],{"class":35,"line":110},[33,2128,241],{"class":119},[33,2130,2131],{"class":136}," { createRequire } ",[33,2133,247],{"class":119},[33,2135,2136],{"class":250}," \"module\"",[33,2138,491],{"class":136},[33,2140,2141,2143,2145,2147,2150,2152,2154,2156,2158],{"class":35,"line":116},[33,2142,612],{"class":119},[33,2144,630],{"class":126},[33,2146,130],{"class":119},[33,2148,2149],{"class":151}," createRequire",[33,2151,155],{"class":136},[33,2153,241],{"class":119},[33,2155,587],{"class":136},[33,2157,2070],{"class":126},[33,2159,2160],{"class":136},".url);\n",[33,2162,2163,2165,2168,2170,2172,2174,2177,2179],{"class":35,"line":143},[33,2164,612],{"class":119},[33,2166,2167],{"class":126}," cjsModule",[33,2169,130],{"class":119},[33,2171,630],{"class":151},[33,2173,155],{"class":136},[33,2175,2176],{"class":250},"\".\u002Fcjs-module.cjs\"",[33,2178,756],{"class":136},[33,2180,2181],{"class":39},"\u002F\u002F load a CommonJS module from ESM\n",[33,2183,2184],{"class":35,"line":186},[33,2185,101],{"emptyLinePlaceholder":100},[33,2187,2188],{"class":35,"line":221},[33,2189,2190],{"class":39},"\u002F\u002F ── Tree-shaking: named exports enable static analysis ──\n",[33,2192,2193],{"class":35,"line":226},[33,2194,2195],{"class":39},"\u002F\u002F Bundlers (Vite, esbuild, Rollup) can remove unused exports (tree-shaking):\n",[33,2197,2198,2200,2203,2205,2208,2210],{"class":35,"line":232},[33,2199,241],{"class":119},[33,2201,2202],{"class":136}," { used } ",[33,2204,247],{"class":119},[33,2206,2207],{"class":250}," \".\u002Fmodule.js\"",[33,2209,254],{"class":136},[33,2211,2212],{"class":39},"\u002F\u002F ✓ only `used` is bundled\n",[33,2214,2215,2217,2220,2222,2224,2227],{"class":35,"line":238},[33,2216,241],{"class":119},[33,2218,2219],{"class":136}," unused ",[33,2221,247],{"class":119},[33,2223,2207],{"class":250},[33,2225,2226],{"class":136},";   ",[33,2228,2229],{"class":39},"\u002F\u002F default import — bundler can't tree-shake (whole module loaded)\n",[33,2231,2232],{"class":35,"line":260},[33,2233,2234],{"class":39},"\u002F\u002F Named imports + ESM = tree-shakeable. CommonJS = not tree-shakeable (require is dynamic).\n",[33,2236,2237],{"class":35,"line":284},[33,2238,101],{"emptyLinePlaceholder":100},[33,2240,2241],{"class":35,"line":308},[33,2242,2243],{"class":39},"\u002F\u002F ── `import type` for TypeScript (compile-time only, erased at runtime) ──\n",[33,2245,2246,2249],{"class":35,"line":313},[33,2247,2248],{"class":39},"\u002F\u002F import type { User, Config } from \".\u002Ftypes.js\";",[33,2250,2251],{"class":39},"  \u002F\u002F types only — erased by the bundler\n",[15,2253,2255],{"id":2254},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[20,2257,2258],{"language":22},[24,2259,2261],{"className":26,"code":2260,"language":22,"meta":28,"style":28},"\u002F\u002F ── ESM imports are hoisted (and in TDZ until the module fully loads) ──\n\u002F\u002F You can use imports before the import statement (they're hoisted):\n\u002F\u002F console.log(add(1, 2));  \u002F\u002F ✓ works (import is hoisted)\n\u002F\u002F import { add } from \".\u002Fmath.js\";\n\n\u002F\u002F ── Default import name is arbitrary (named import must match) ──\n\u002F\u002F import foo from \".\u002Fmath.js\";  \u002F\u002F `foo` is whatever the default export is (name is arbitrary)\n\u002F\u002F import { add } from \".\u002Fmath.js\";  \u002F\u002F `add` must match the exported name (or use `as`)\n\n\u002F\u002F ── ESM file extension is required in the browser (not auto-resolved) ──\n\u002F\u002F Browser: import \".\u002Ffoo.js\"  ✓ (extension required)\n\u002F\u002F Node: import \".\u002Ffoo\" works (resolves .js, .mjs, \u002Findex.js) if package.json has type:module\n\u002F\u002F Bundlers (Vite, webpack): extension optional (they resolve at build time)\n\n\u002F\u002F ── Circular dependencies can cause undefined access ──\n\u002F\u002F If B runs before A (due to a cycle), B's import of A may be undefined at top level.\n\u002F\u002F Fix: defer access to functions (the cycle resolves by evaluation time).\n\n\u002F\u002F ── `module.exports` vs `export default` in CJS\u002FESM interop ──\n\u002F\u002F CJS: module.exports = function() {}  → ESM import: import foo from \"cjs-module\"\n\u002F\u002F CJS: module.exports = { fn: ... }     → ESM import: import { fn } from \"cjs-module\" (interop may vary)\n\u002F\u002F ESM in CJS: requires dynamic import (require() can't load ESM synchronously)\n\n\u002F\u002F ── Top-level await blocks dependent modules ──\n\u002F\u002F If module A uses top-level await, all modules that import A wait for it to resolve.\n\u002F\u002F This can slow down the entire module graph — use sparingly.\n\n\u002F\u002F ── `import()` can't be used with variables in the specifier (for security) ──\n\u002F\u002F const path = \".\u002Fmodule.js\";\n\u002F\u002F import(path);  \u002F\u002F ✓ dynamic import allows variables (but it's a dynamic spec)\n\u002F\u002F import `${path}`;  \u002F\u002F ✗ static import can't use variables (must be a string literal)\n",[30,2262,2263,2268,2273,2281,2286,2290,2295,2303,2311,2315,2320,2325,2330,2335,2339,2344,2349,2354,2358,2363,2368,2373,2378,2382,2387,2392,2397,2401,2406,2411,2419],{"__ignoreMap":28},[33,2264,2265],{"class":35,"line":36},[33,2266,2267],{"class":39},"\u002F\u002F ── ESM imports are hoisted (and in TDZ until the module fully loads) ──\n",[33,2269,2270],{"class":35,"line":43},[33,2271,2272],{"class":39},"\u002F\u002F You can use imports before the import statement (they're hoisted):\n",[33,2274,2275,2278],{"class":35,"line":49},[33,2276,2277],{"class":39},"\u002F\u002F console.log(add(1, 2));",[33,2279,2280],{"class":39},"  \u002F\u002F ✓ works (import is hoisted)\n",[33,2282,2283],{"class":35,"line":55},[33,2284,2285],{"class":39},"\u002F\u002F import { add } from \".\u002Fmath.js\";\n",[33,2287,2288],{"class":35,"line":61},[33,2289,101],{"emptyLinePlaceholder":100},[33,2291,2292],{"class":35,"line":67},[33,2293,2294],{"class":39},"\u002F\u002F ── Default import name is arbitrary (named import must match) ──\n",[33,2296,2297,2300],{"class":35,"line":73},[33,2298,2299],{"class":39},"\u002F\u002F import foo from \".\u002Fmath.js\";",[33,2301,2302],{"class":39},"  \u002F\u002F `foo` is whatever the default export is (name is arbitrary)\n",[33,2304,2305,2308],{"class":35,"line":79},[33,2306,2307],{"class":39},"\u002F\u002F import { add } from \".\u002Fmath.js\";",[33,2309,2310],{"class":39},"  \u002F\u002F `add` must match the exported name (or use `as`)\n",[33,2312,2313],{"class":35,"line":85},[33,2314,101],{"emptyLinePlaceholder":100},[33,2316,2317],{"class":35,"line":91},[33,2318,2319],{"class":39},"\u002F\u002F ── ESM file extension is required in the browser (not auto-resolved) ──\n",[33,2321,2322],{"class":35,"line":97},[33,2323,2324],{"class":39},"\u002F\u002F Browser: import \".\u002Ffoo.js\"  ✓ (extension required)\n",[33,2326,2327],{"class":35,"line":104},[33,2328,2329],{"class":39},"\u002F\u002F Node: import \".\u002Ffoo\" works (resolves .js, .mjs, \u002Findex.js) if package.json has type:module\n",[33,2331,2332],{"class":35,"line":110},[33,2333,2334],{"class":39},"\u002F\u002F Bundlers (Vite, webpack): extension optional (they resolve at build time)\n",[33,2336,2337],{"class":35,"line":116},[33,2338,101],{"emptyLinePlaceholder":100},[33,2340,2341],{"class":35,"line":143},[33,2342,2343],{"class":39},"\u002F\u002F ── Circular dependencies can cause undefined access ──\n",[33,2345,2346],{"class":35,"line":186},[33,2347,2348],{"class":39},"\u002F\u002F If B runs before A (due to a cycle), B's import of A may be undefined at top level.\n",[33,2350,2351],{"class":35,"line":221},[33,2352,2353],{"class":39},"\u002F\u002F Fix: defer access to functions (the cycle resolves by evaluation time).\n",[33,2355,2356],{"class":35,"line":226},[33,2357,101],{"emptyLinePlaceholder":100},[33,2359,2360],{"class":35,"line":232},[33,2361,2362],{"class":39},"\u002F\u002F ── `module.exports` vs `export default` in CJS\u002FESM interop ──\n",[33,2364,2365],{"class":35,"line":238},[33,2366,2367],{"class":39},"\u002F\u002F CJS: module.exports = function() {}  → ESM import: import foo from \"cjs-module\"\n",[33,2369,2370],{"class":35,"line":260},[33,2371,2372],{"class":39},"\u002F\u002F CJS: module.exports = { fn: ... }     → ESM import: import { fn } from \"cjs-module\" (interop may vary)\n",[33,2374,2375],{"class":35,"line":284},[33,2376,2377],{"class":39},"\u002F\u002F ESM in CJS: requires dynamic import (require() can't load ESM synchronously)\n",[33,2379,2380],{"class":35,"line":308},[33,2381,101],{"emptyLinePlaceholder":100},[33,2383,2384],{"class":35,"line":313},[33,2385,2386],{"class":39},"\u002F\u002F ── Top-level await blocks dependent modules ──\n",[33,2388,2389],{"class":35,"line":343},[33,2390,2391],{"class":39},"\u002F\u002F If module A uses top-level await, all modules that import A wait for it to resolve.\n",[33,2393,2394],{"class":35,"line":361},[33,2395,2396],{"class":39},"\u002F\u002F This can slow down the entire module graph — use sparingly.\n",[33,2398,2399],{"class":35,"line":388},[33,2400,101],{"emptyLinePlaceholder":100},[33,2402,2403],{"class":35,"line":406},[33,2404,2405],{"class":39},"\u002F\u002F ── `import()` can't be used with variables in the specifier (for security) ──\n",[33,2407,2408],{"class":35,"line":411},[33,2409,2410],{"class":39},"\u002F\u002F const path = \".\u002Fmodule.js\";\n",[33,2412,2413,2416],{"class":35,"line":417},[33,2414,2415],{"class":39},"\u002F\u002F import(path);",[33,2417,2418],{"class":39},"  \u002F\u002F ✓ dynamic import allows variables (but it's a dynamic spec)\n",[33,2420,2421,2424],{"class":35,"line":423},[33,2422,2423],{"class":39},"\u002F\u002F import `${path}`;",[33,2425,2426],{"class":39},"  \u002F\u002F ✗ static import can't use variables (must be a string literal)\n",[15,2428,2430],{"id":2429},"quick-quiz","🧠 Quick Quiz",[2432,2433,2434,2435,2438,2439,2441],"p",{},"Why does this CommonJS code print ",[30,2436,2437],{},"0"," instead of ",[30,2440,375],{},"?",[20,2443,2444],{"language":22},[24,2445,2447],{"className":26,"code":2446,"language":22,"meta":28,"style":28},"\u002F\u002F counter.cjs:\nlet count = 0;\nfunction increment() { count++; }\nmodule.exports = { count, increment };\n\n\u002F\u002F app.cjs:\nconst { count, increment } = require(\".\u002Fcounter.cjs\");\nincrement();\nconsole.log(count);\n",[30,2448,2449,2454,2466,2478,2491,2495,2500,2525,2531],{"__ignoreMap":28},[33,2450,2451],{"class":35,"line":36},[33,2452,2453],{"class":39},"\u002F\u002F counter.cjs:\n",[33,2455,2456,2458,2460,2462,2464],{"class":35,"line":43},[33,2457,557],{"class":119},[33,2459,431],{"class":136},[33,2461,434],{"class":119},[33,2463,437],{"class":126},[33,2465,491],{"class":136},[33,2467,2468,2470,2472,2474,2476],{"class":35,"line":49},[33,2469,570],{"class":119},[33,2471,453],{"class":151},[33,2473,456],{"class":136},[33,2475,459],{"class":119},[33,2477,579],{"class":136},[33,2479,2480,2482,2484,2486,2488],{"class":35,"line":55},[33,2481,584],{"class":126},[33,2483,587],{"class":136},[33,2485,590],{"class":126},[33,2487,130],{"class":119},[33,2489,2490],{"class":136}," { count, increment };\n",[33,2492,2493],{"class":35,"line":61},[33,2494,101],{"emptyLinePlaceholder":100},[33,2496,2497],{"class":35,"line":67},[33,2498,2499],{"class":39},"\u002F\u002F app.cjs:\n",[33,2501,2502,2504,2506,2508,2510,2512,2514,2516,2518,2520,2523],{"class":35,"line":73},[33,2503,612],{"class":119},[33,2505,615],{"class":136},[33,2507,618],{"class":126},[33,2509,162],{"class":136},[33,2511,510],{"class":126},[33,2513,625],{"class":136},[33,2515,434],{"class":119},[33,2517,630],{"class":151},[33,2519,155],{"class":136},[33,2521,2522],{"class":250},"\".\u002Fcounter.cjs\"",[33,2524,638],{"class":136},[33,2526,2527,2529],{"class":35,"line":79},[33,2528,510],{"class":151},[33,2530,513],{"class":136},[33,2532,2533,2535,2537],{"class":35,"line":85},[33,2534,316],{"class":136},[33,2536,319],{"class":151},[33,2538,2539],{"class":136},"(count);\n",[2541,2542,2543,2547,2551,2597,2609,2615,2663],"details",{},[2544,2545,2546],"summary",{},"Answer",[2432,2548,2549],{},[30,2550,2437],{},[2432,2552,2553,2554,2558,2559,2562,2563,2566,2567,2569,2570,2572,2573,2576,2577,2579,2580,2583,2584,2586,2587,2589,2590,2593,2594,2596],{},"CommonJS copies the exported ",[2555,2556,2557],"strong",{},"values"," at ",[30,2560,2561],{},"require()"," time, not references. When ",[30,2564,2565],{},"module.exports = { count, increment }"," executes, ",[30,2568,618],{}," is ",[30,2571,2437],{}," — the export captures a ",[2555,2574,2575],{},"copy"," of the value ",[30,2578,2437],{},". When ",[30,2581,2582],{},"increment()"," runs, it increments the module's internal ",[30,2585,618],{}," (now 1), but the imported ",[30,2588,618],{}," in ",[30,2591,2592],{},"app.cjs"," is still ",[30,2595,2437],{}," (it was copied at import time and doesn't reflect the change).",[2432,2598,2599,2600,2602,2603,2606,2607,1974],{},"With ES Modules, ",[30,2601,618],{}," would be a ",[2555,2604,2605],{},"live binding"," — the import would reflect the updated value (",[30,2608,375],{},[2432,2610,2611,2614],{},[2555,2612,2613],{},"Fix (CommonJS)",": export a getter or an object:",[24,2616,2618],{"className":26,"code":2617,"language":22,"meta":28,"style":28},"\u002F\u002F counter.cjs:\nmodule.exports = {\n    get count() { return count; },  \u002F\u002F getter reads the current value\n    increment,\n};\n",[30,2619,2620,2624,2636,2654,2659],{"__ignoreMap":28},[33,2621,2622],{"class":35,"line":36},[33,2623,2453],{"class":39},[33,2625,2626,2628,2630,2632,2634],{"class":35,"line":43},[33,2627,584],{"class":126},[33,2629,587],{"class":136},[33,2631,590],{"class":126},[33,2633,130],{"class":119},[33,2635,905],{"class":136},[33,2637,2638,2641,2644,2646,2648,2651],{"class":35,"line":49},[33,2639,2640],{"class":119},"    get",[33,2642,2643],{"class":151}," count",[33,2645,1267],{"class":136},[33,2647,171],{"class":119},[33,2649,2650],{"class":136}," count; },  ",[33,2652,2653],{"class":39},"\u002F\u002F getter reads the current value\n",[33,2655,2656],{"class":35,"line":55},[33,2657,2658],{"class":136},"    increment,\n",[33,2660,2661],{"class":35,"line":61},[33,2662,1816],{"class":136},[2432,2664,2665,2668],{},[2555,2666,2667],{},"The lesson",": CommonJS exports are copies (values at import time). ESM exports are live bindings (references that reflect the exporter's current value). This is the fundamental difference between the two module systems.",[2670,2671,2672],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}",{"title":28,"searchDepth":43,"depth":43,"links":2674},[2675,2676,2677,2678,2679,2680,2681,2682,2683],{"id":17,"depth":43,"text":18},{"id":534,"depth":43,"text":535},{"id":815,"depth":43,"text":816},{"id":1202,"depth":43,"text":1203},{"id":1551,"depth":43,"text":1552},{"id":1766,"depth":43,"text":1767},{"id":2042,"depth":43,"text":2043},{"id":2254,"depth":43,"text":2255},{"id":2429,"depth":43,"text":2430},"Deep-dive into JavaScript module systems: ES Module loading phases (construction, instantiation, evaluation), live bindings vs CommonJS copies, dynamic import and code splitting, circular dependency handling, and package.json exports. Code-first reference for senior engineers.","md",{},"\u002Fjs\u002F14-modules",{"title":5,"description":2684},"js\u002F14-modules","cj-4FNZ-wZ0TwDPk6VVkzo94WhScYxdBsIhAR4YMEk8",1789924649300]