Back to Diary

일본 한달살이 16일차 (5월 13일)

아침에 일찍 일어나서 아침/점심 사러 마트를 갔다왔다. 7시 반쯤이었는데, 혹시나 안 하면 어떡하지 생각했었는데 하더라.

아침으론 단백질(?)을 먹었다.


작업 일지

next.js: SourceMap 재사용 X: 마무리

- https://github.com/vercel/next.js/pull/65602

보니까 다 된 것 같아서 리베이스만 해줬다.

Minifier eval 버그 수정 1

String.charCodeAt 을 잘못 evaluate하는 버그였고, 해결은 간단할 줄 알았는데 utf8 vs utf16 인코딩 문제로 조금 해멨다.

Minifier 인라이닝 버그 수정 1

정적 분석의 한계로 인한 Regression이 좀 있지만 작업은 매우 쉬웠다.

터보팩 Tree shaking PR

이어서 작업했다. 로그 찍는 코드 추가하다가 깨달은 것인데

impl VisitMutAstPath for ApplyVisitors<'_, '_> { // TODO: we need a macro to apply that for all methods method!(visit_mut_prop, Prop); method!(visit_mut_expr, Expr); method!(visit_mut_member_expr, MemberExpr); method!(visit_mut_pat, Pat); method!(visit_mut_stmt, Stmt); method!(visit_mut_module_decl, ModuleDecl); method!(visit_mut_module_item, ModuleItem); method!(visit_mut_call_expr, CallExpr); method!(visit_mut_lit, Lit); method!(visit_mut_str, Str); }

같은 코드가 있었고 여기에 SimpleAssignTarget이 없어서 내가 원하는 메소드가 실행이 안 되는 것이었다. 그래서 추가해주고 dbg! 는 다 지웠다.

✓ Compiled /_error in 431ms ⨯ TypeError: Cannot read properties of undefined (reading 'PAGES') at /Users/kdy1/projects/app-playground/.next/server/chunks/ssr/node_modules__pnpm_0cbf07._.js:3001:354 at [project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/build/templates/pages.js { INNER_PAGE => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>", INNER_DOCUMENT => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/document.js [ssr] (ecmascript) <facade>", INNER_APP => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [ssr] (ecmascript) <facade>" } [ssr] (ecmascript) <internal part 12> (/Users/kdy1/projects/app-playground/.next/server/chunks/ssr/node_modules__pnpm_0cbf07._.js:3016:3)

이후엔 이런 에러가 떴고,

"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/build/templates/pages.js { INNER_PAGE => \"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>\", INNER_DOCUMENT => \"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/document.js [ssr] (ecmascript) <facade>\", INNER_APP => \"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [ssr] (ecmascript) <facade>\" } [ssr] (ecmascript) <internal part 12>": (({ r: __turbopack_require__, f: __turbopack_module_context__, i: __turbopack_import__, s: __turbopack_esm__, v: __turbopack_export_value__, n: __turbopack_export_namespace__, c: __turbopack_cache__, M: __turbopack_modules__, l: __turbopack_load__, j: __turbopack_dynamic__, P: __turbopack_resolve_absolute_path__, U: __turbopack_relative_url__, R: __turbopack_resolve_module_id_path__, g: global, __dirname, x: __turbopack_external_require__, y: __turbopack_external_import__ }) => (() => { "use strict"; __turbopack_esm__({ "routeModule": ()=>routeModule }); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$modules$2f$pages$2f$module$2e$compiled$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$module__evaluation$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-modules/pages/module.compiled.js [ssr] (ecmascript) <module evaluation>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$modules$2f$pages$2f$module$2e$compiled$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__PagesRouteModule$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-modules/pages/module.compiled.js [ssr] (ecmascript) <export PagesRouteModule>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$module__evaluation$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <module evaluation>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__RouteKind$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <export RouteKind>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$document$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/document.js [ssr] (ecmascript) <facade>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$app$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [ssr] (ecmascript) <facade>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$modules$2f$pages$2f$module$2e$compiled$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__PagesRouteModule$3e$____PagesRouteModule__binding = __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$modules$2f$pages$2f$module$2e$compiled$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__PagesRouteModule$3e$__["PagesRouteModule"]; var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__RouteKind$3e$____RouteKind__binding = __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__RouteKind$3e$__["RouteKind"]; var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$app$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$____default__binding = __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$app$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__["default"]; var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$document$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$____default__binding = __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$document$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__["default"]; var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$____binding = __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__; "__TURBOPACK__ecmascript__hoisting__location__"; ; ; ; ; ; ; const routeModule = new __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$modules$2f$pages$2f$module$2e$compiled$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__PagesRouteModule$3e$____PagesRouteModule__binding({ definition: { kind: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__RouteKind$3e$____RouteKind__binding.PAGES, page: "/_error", pathname: "/_error", // The following aren't used in production. bundlePath: '', filename: '' }, components: { App: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$app$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$____default__binding, Document: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$document$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$____default__binding }, userland: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$____binding }); //# sourceMappingURL=pages.js.map ; })()),

생성된 코드는 이랬다. 보니까 RouteKind enum이 제대로 초기화되지 않은 것 같았다. 에러 메시지는 xxx__RouteKind__binding.PAGES 를 실행할 때 xxx__RouteKind__bindingundefined 였다는 소리고, 초기화 로직은

var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__RouteKind$3e$____RouteKind__binding = __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__RouteKind$3e$__["RouteKind"];

이었다. 그래서 route-kind.js [ssr] (ecmascript) <export RouteKind> 에셋을 찾아봤다.

"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <export RouteKind>": (({ r: __turbopack_require__, f: __turbopack_module_context__, i: __turbopack_import__, s: __turbopack_esm__, v: __turbopack_export_value__, n: __turbopack_export_namespace__, c: __turbopack_cache__, M: __turbopack_modules__, l: __turbopack_load__, j: __turbopack_dynamic__, P: __turbopack_resolve_absolute_path__, U: __turbopack_relative_url__, R: __turbopack_resolve_module_id_path__, g: global, __dirname, x: __turbopack_external_require__, y: __turbopack_external_import__ }) => (() => { "use strict"; __turbopack_esm__({ "RouteKind": ()=>__TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__3$3e$__["RouteKind"] }); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$module__evaluation$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <module evaluation>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__3$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <internal part 3>"); "__TURBOPACK__ecmascript__hoisting__location__"; ; ; })()),

RouteKind 을 따라가보니,

"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <internal part 3>": (({ r: __turbopack_require__, f: __turbopack_module_context__, i: __turbopack_import__, s: __turbopack_esm__, v: __turbopack_export_value__, n: __turbopack_export_namespace__, c: __turbopack_cache__, M: __turbopack_modules__, l: __turbopack_load__, j: __turbopack_dynamic__, P: __turbopack_resolve_absolute_path__, U: __turbopack_relative_url__, R: __turbopack_resolve_module_id_path__, g: global, __dirname, x: __turbopack_external_require__, y: __turbopack_external_import__ }) => (() => { "use strict"; __turbopack_esm__({}); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$module__evaluation$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <module evaluation>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__2$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <internal part 2>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__2$3e$____RouteKind__binding = __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__2$3e$__["RouteKind"]; "__TURBOPACK__ecmascript__hoisting__location__"; ; (function(RouteKind) { /** * `PAGES` represents all the React pages that are under `pages/`. */ RouteKind["PAGES"] = "PAGES"; /** * `PAGES_API` represents all the API routes under `pages/api/`. */ RouteKind["PAGES_API"] = "PAGES_API"; /** * `APP_PAGE` represents all the React pages that are under `app/` with the * filename of `page.{j,t}s{,x}`. */ RouteKind["APP_PAGE"] = "APP_PAGE"; /** * `APP_ROUTE` represents all the API routes and metadata routes that are under `app/` with the * filename of `route.{j,t}s{,x}`. */ RouteKind["APP_ROUTE"] = "APP_ROUTE"; })(__TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__2$3e$____RouteKind__binding || (__TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__2$3e$____RouteKind__binding = {})); //# sourceMappingURL=route-kind.js.map })()),

가 나왔다.

"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "RouteKind", { enumerable: true, get: function() { return RouteKind; } }); var RouteKind; (function(RouteKind) { /** * `PAGES` represents all the React pages that are under `pages/`. */ RouteKind["PAGES"] = "PAGES"; /** * `PAGES_API` represents all the API routes under `pages/api/`. */ RouteKind["PAGES_API"] = "PAGES_API"; /** * `APP_PAGE` represents all the React pages that are under `app/` with the * filename of `page.{j,t}s{,x}`. */ RouteKind["APP_PAGE"] = "APP_PAGE"; /** * `APP_ROUTE` represents all the API routes and metadata routes that are under `app/` with the * filename of `route.{j,t}s{,x}`. */ RouteKind["APP_ROUTE"] = "APP_ROUTE"; })(RouteKind || (RouteKind = {})); //# sourceMappingURL=route-kind.js.map

route-kind.js 파일을 찾아서 module splitter의 유닛 테스트를 추가했다.

그런 뒤 깨달은 것인데, 현재 module splitter는 한 ESM을 여러 개의 표준 ESM으로 쪼개는데, 이 방식에서는 RouteKind의 처리가 불가능하다. 표준 ESM은 export된 아이템을 수정하는 걸 허용하지 않아서이다. 즉, 가짜 ESM에 대해서는 fake ESM 모드를 사용해서 export된 아이템들을 수정할 수 있게 해줘야한다.

Fake ESM 모드를 구현하기에 앞서 변수 _binding 파트는 부분적으로 revert 했다. 저 패치를 한 이유가 mutation 때문인데, Fake ESM 모드에서는 원본 모듈을 수정하면 되기 때문이다.


디버깅을 열심히 하면서 알아낸 것들이 있다.

  • route-kind.js [ssr] (ecmascript) <export RouteKind>route-kind.js [ssr] (ecmascript) <internal part 3> 의 RouteKind를 reexport한다.
"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <internal part 3>": (({ r: __turbopack_require__, f: __turbopack_module_context__, i: __turbopack_import__, s: __turbopack_esm__, v: __turbopack_export_value__, n: __turbopack_export_namespace__, c: __turbopack_cache__, M: __turbopack_modules__, l: __turbopack_load__, j: __turbopack_dynamic__, P: __turbopack_resolve_absolute_path__, U: __turbopack_relative_url__, R: __turbopack_resolve_module_id_path__, g: global, __dirname, x: __turbopack_external_require__, y: __turbopack_external_import__ }) => (() => { "use strict"; __turbopack_esm__({}); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$module__evaluation$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <module evaluation>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__2$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <internal part 2>"); "__TURBOPACK__ecmascript__hoisting__location__"; ; (function(RouteKind) { /** * `PAGES` represents all the React pages that are under `pages/`. */ RouteKind["PAGES"] = "PAGES"; /** * `PAGES_API` represents all the API routes under `pages/api/`. */ RouteKind["PAGES_API"] = "PAGES_API"; /** * `APP_PAGE` represents all the React pages that are under `app/` with the * filename of `page.{j,t}s{,x}`. */ RouteKind["APP_PAGE"] = "APP_PAGE"; /** * `APP_ROUTE` represents all the API routes and metadata routes that are under `app/` with the * filename of `route.{j,t}s{,x}`. */ RouteKind["APP_ROUTE"] = "APP_ROUTE"; })(__TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__2$3e$__["RouteKind"] || (__TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__2$3e$__["RouteKind"] = {})); //# sourceMappingURL=route-kind.js.map })()),
  • route-kind.js [ssr] (ecmascript) <internal part 3> 는 RouteKind 변수를 초기화하는 모듈이다.

  • route-kind.js [ssr] (ecmascript) <internal part 3> 는 export를 하지 않는다.

<internal part 3>RouteKind = {} 를 통해 RouteKind를 수정하는데, 이게 쓰기 작업으로 잡혀서 의존성이 저 모듈로 간 것 같았다. 앞에서 유닛 테스트 추가할 때 실수를 했는데, route-kind.js의 내용은

export var RouteKind; (function(RouteKind) { /** * `PAGES` represents all the React pages that are under `pages/`. */ RouteKind["PAGES"] = "PAGES"; /** * `PAGES_API` represents all the API routes under `pages/api/`. */ RouteKind["PAGES_API"] = "PAGES_API"; /** * `APP_PAGE` represents all the React pages that are under `app/` with the * filename of `page.{j,t}s{,x}`. */ RouteKind["APP_PAGE"] = "APP_PAGE"; /** * `APP_ROUTE` represents all the API routes and metadata routes that are under `app/` with the * filename of `route.{j,t}s{,x}`. */ RouteKind["APP_ROUTE"] = "APP_ROUTE"; })(RouteKind || (RouteKind = {})); //# sourceMappingURL=route-kind.js.map

였다.

export { RouteKind }가 생성되야하는데, 관련된 코드를 찾아보니 한 Statement가 한 변수를 read-write 할 때에는 관련 export {}가 생성되지 않는다는 것을 발견했고,

// Emit `export { foo }` for var in data.write_vars.iter() { - if required_vars.remove(var) { + if required_vars.remove(var) || data.read_vars.contains(var) {

처럼 고쳤다.

⨯ TypeError: Cannot use 'in' operator to search for 'unstable_getServerSideProps' in undefined at hoist (/Users/kdy1/projects/app-playground/.next/server/chunks/ssr/node_modules__pnpm_0cbf07._.js:3040:14) at /Users/kdy1/projects/app-playground/.next/server/chunks/ssr/node_modules__pnpm_0cbf07._.js:3078:361

다음 에러는 'unstable_getServerSideProps' in undefined 이었고,

function hoist(module, name) { // If the name is available in the module, return it. if (name in module) { return module[name]; } // If a property called `then` exists, assume it's a promise and // return a promise that resolves to the name. if ('then' in module && typeof module.then === 'function') { return module.then((mod)=>hoist(mod, name)); } // If we're trying to hoise the default export, and the module is a function, // return the module itself. if (typeof module === 'function' && name === 'default') { return module; } // Otherwise, return undefined. return undefined; }

name in module에서 moduleundefined라 실패하는 것이었다. 이 경우 module 의 값이 중요하므로 콜 스택을 따라갔다.

"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/build/templates/pages.js { INNER_PAGE => \"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>\", INNER_DOCUMENT => \"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/document.js [ssr] (ecmascript) <facade>\", INNER_APP => \"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [ssr] (ecmascript) <facade>\" } [ssr] (ecmascript) <internal part 11>": (({ r: __turbopack_require__, f: __turbopack_module_context__, i: __turbopack_import__, s: __turbopack_esm__, v: __turbopack_export_value__, n: __turbopack_export_namespace__, c: __turbopack_cache__, M: __turbopack_modules__, l: __turbopack_load__, j: __turbopack_dynamic__, P: __turbopack_resolve_absolute_path__, U: __turbopack_relative_url__, R: __turbopack_resolve_module_id_path__, g: global, __dirname, x: __turbopack_external_require__, y: __turbopack_external_import__ }) => (() => { "use strict"; __turbopack_esm__({ "unstable_getServerSideProps": [ ()=>unstable_getServerSideProps, (v)=>unstable_getServerSideProps = v ] }); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$build$2f$templates$2f$pages$2e$js__$7b$__INNER_PAGE__$3d3e$__$225b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e222c$__INNER_DOCUMENT__$3d3e$__$225b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$document$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e222c$__INNER_APP__$3d3e$__$225b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$app$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e22$__$7d$__$5b$ssr$5d$__$28$ecmascript$29$__$3c$module__evaluation$3e$__ = __turbopack_import__('[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/build/templates/pages.js { INNER_PAGE => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>", INNER_DOCUMENT => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/document.js [ssr] (ecmascript) <facade>", INNER_APP => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [ssr] (ecmascript) <facade>" } [ssr] (ecmascript) <module evaluation>'); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$build$2f$templates$2f$pages$2e$js__$7b$__INNER_PAGE__$3d3e$__$225b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e222c$__INNER_DOCUMENT__$3d3e$__$225b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$document$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e222c$__INNER_APP__$3d3e$__$225b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$app$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e22$__$7d$__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__12$3e$__ = __turbopack_import__('[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/build/templates/pages.js { INNER_PAGE => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>", INNER_DOCUMENT => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/document.js [ssr] (ecmascript) <facade>", INNER_APP => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [ssr] (ecmascript) <facade>" } [ssr] (ecmascript) <internal part 12>'); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$build$2f$templates$2f$helpers$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$module__evaluation$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/build/templates/helpers.js [ssr] (ecmascript) <module evaluation>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$build$2f$templates$2f$helpers$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__hoist$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/build/templates/helpers.js [ssr] (ecmascript) <export hoist>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>"); "__TURBOPACK__ecmascript__hoisting__location__"; ; ; ; ; const unstable_getServerSideProps = (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$build$2f$templates$2f$helpers$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__hoist$3e$__["hoist"])(__TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$build$2f$templates$2f$pages$2e$js__$7b$__INNER_PAGE__$3d3e$__$225b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e222c$__INNER_DOCUMENT__$3d3e$__$225b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$document$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e222c$__INNER_APP__$3d3e$__$225b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$app$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e22$__$7d$__$5b$ssr$5d$__$28$ecmascript$29$__$3c$internal__part__12$3e$__["userland"], 'unstable_getServerSideProps'); ; })()),

internal__part__12$3e$__["userland"]undefined 였던 것인데, 따라가다 보니까 모듈 이름이 좀 이상했다.

  • app.js [ssr] (ecmascript) <facade>" } [ssr] (ecmascript) <internal part 12>

???

해결에 가까워졌다는 느낌이어서 좋긴 했지만, 골치 아파보였다. 일단 전체 모듈 이름은

[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/build/templates/pages.js { INNER_PAGE => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>", INNER_DOCUMENT => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/document.js [ssr] (ecmascript) <facade>", INNER_APP => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [ssr] (ecmascript) <facade>" } [ssr] (ecmascript) <internal part 12>

이다. 그리고 <internal part 12> 모듈의 코드는

"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/build/templates/pages.js { INNER_PAGE => \"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>\", INNER_DOCUMENT => \"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/document.js [ssr] (ecmascript) <facade>\", INNER_APP => \"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [ssr] (ecmascript) <facade>\" } [ssr] (ecmascript) <internal part 12>": (({ r: __turbopack_require__, f: __turbopack_module_context__, i: __turbopack_import__, s: __turbopack_esm__, v: __turbopack_export_value__, n: __turbopack_export_namespace__, c: __turbopack_cache__, M: __turbopack_modules__, l: __turbopack_load__, j: __turbopack_dynamic__, P: __turbopack_resolve_absolute_path__, U: __turbopack_relative_url__, R: __turbopack_resolve_module_id_path__, g: global, __dirname, x: __turbopack_external_require__, y: __turbopack_external_import__ }) => (() => { "use strict"; __turbopack_esm__({ "routeModule": [ ()=>routeModule, (v)=>routeModule = v ] }); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$modules$2f$pages$2f$module$2e$compiled$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$module__evaluation$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-modules/pages/module.compiled.js [ssr] (ecmascript) <module evaluation>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$modules$2f$pages$2f$module$2e$compiled$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__PagesRouteModule$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-modules/pages/module.compiled.js [ssr] (ecmascript) <export PagesRouteModule>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$module__evaluation$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <module evaluation>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__RouteKind$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/server/future/route-kind.js [ssr] (ecmascript) <export RouteKind>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$document$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/document.js [ssr] (ecmascript) <facade>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$app$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [ssr] (ecmascript) <facade>"); var __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__ = __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>"); "__TURBOPACK__ecmascript__hoisting__location__"; ; ; ; ; ; ; const routeModule = new __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$modules$2f$pages$2f$module$2e$compiled$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__PagesRouteModule$3e$__["PagesRouteModule"]({ definition: { kind: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__RouteKind$3e$__["RouteKind"].PAGES, page: "/_error", pathname: "/_error", // The following aren't used in production. bundlePath: '', filename: '' }, components: { App: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$app$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__["default"], Document: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$document$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__["default"] }, userland: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__ }); //# sourceMappingURL=pages.js.map ; })()),

이다. 보면 알겠지만 userland라는 export는 없다.

import { PagesRouteModule } from '../../server/future/route-modules/pages/module.compiled'; import { RouteKind } from '../../server/future/route-kind'; import { hoist } from './helpers'; // Import the app and document modules. import Document from 'VAR_MODULE_DOCUMENT'; import App from 'VAR_MODULE_APP'; // Import the userland code. import * as userland from 'VAR_USERLAND'; // Re-export the component (should be the default export). export default hoist(userland, 'default'); // Re-export methods. export const getStaticProps = hoist(userland, 'getStaticProps'); export const getStaticPaths = hoist(userland, 'getStaticPaths'); export const getServerSideProps = hoist(userland, 'getServerSideProps'); export const config = hoist(userland, 'config'); export const reportWebVitals = hoist(userland, 'reportWebVitals'); // Re-export legacy methods. export const unstable_getStaticProps = hoist(userland, 'unstable_getStaticProps'); export const unstable_getStaticPaths = hoist(userland, 'unstable_getStaticPaths'); export const unstable_getStaticParams = hoist(userland, 'unstable_getStaticParams'); export const unstable_getServerProps = hoist(userland, 'unstable_getServerProps'); export const unstable_getServerSideProps = hoist(userland, 'unstable_getServerSideProps'); // Create and export the route module that will be consumed. export const routeModule = new PagesRouteModule({ definition: { kind: RouteKind.PAGES, page: 'VAR_DEFINITION_PAGE', pathname: 'VAR_DEFINITION_PATHNAME', // The following aren't used in production. bundlePath: '', filename: '' }, components: { App, Document }, userland }); //# sourceMappingURL=pages.js.map
  • next/dist/esm/build/templates/pages.js의 컨텐츠

그래서 module spitting 유닛 테스트에 pages.js 파일을 추가했다. 테스트 결과를 보니까 export const routeModule 모듈에서 userland를 임포트하려고 시도하는 게 문제였다.


한참동안 이것저것을 시도해봤는데,

const routeModule = new __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$modules$2f$pages$2f$module$2e$compiled$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__PagesRouteModule$3e$__["PagesRouteModule"]({ definition: { kind: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$future$2f$route$2d$kind$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$export__RouteKind$3e$__["RouteKind"].PAGES, page: "/_error", pathname: "/_error", // The following aren't used in production. bundlePath: '', filename: '' }, components: { App: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$app$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__["default"], Document: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$document$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__["default"] }, userland: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$file$2b2e2e2b$nextpack$2b$tarballs$2b$next$2e$tar_react$2d$dom$40$18$2e$2$2e$0_react$40$18$2e$2$2e$0$2f$node_modules$2f$next$2f$error$2e$js__$5b$ssr$5d$__$28$ecmascript$29$__$3c$facade$3e$__ });

userland가 이상한 값을 가리키고 있었다. __turbopack_import__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>"); 로 초기화 된 모듈을 가리키고 있었는데, userland가 import 문에 의해서 정의되는 값이므로, VAR_USERLAND 를 resolve 하지 못해서 이런 일이 생긴 것이라고 추측했다.

let template_file = match (&reference_type, runtime) { (ReferenceType::Entry(EntryReferenceSubType::Page), _) => { // Load the Page entry file. "pages.js" } (ReferenceType::Entry(EntryReferenceSubType::PagesAPI), NextRuntime::NodeJs) => { // Load the Pages API entry file. "pages-api.js" } (ReferenceType::Entry(EntryReferenceSubType::PagesAPI), NextRuntime::Edge) => { // Load the Pages API entry file. "pages-edge-api.js" } _ => bail!("Invalid path type"), }; const INNER: &str = "INNER_PAGE"; const INNER_DOCUMENT: &str = "INNER_DOCUMENT"; const INNER_APP: &str = "INNER_APP"; let mut replacements = indexmap! { "VAR_DEFINITION_PAGE" => definition_page.clone(), "VAR_DEFINITION_PATHNAME" => definition_pathname.clone(), "VAR_USERLAND" => INNER.to_string(), };

VAR_USERLAND를 처리하는 코드를 찾아보니 INNER_PAGE 라는 값을 쓰던데 저게 뭔지 몰라서 일단 결과물을 로그찍어봤다.

import { PagesRouteModule } from "next/dist/esm/server/future/route-modules/pages/module.compiled"; import { RouteKind } from "next/dist/esm/server/future/route-kind"; import { hoist } from "next/dist/esm/build/templates/helpers"; // Import the app and document modules. import Document from "INNER_DOCUMENT"; import App from "INNER_APP"; // Import the userland code. import * as userland from " "; // Re-export the component (should be the default export). export default hoist(userland, 'default'); // Re-export methods. export const getStaticProps = hoist(userland, 'getStaticProps'); export const getStaticPaths = hoist(userland, 'getStaticPaths'); export const getServerSideProps = hoist(userland, 'getServerSideProps'); export const config = hoist(userland, 'config'); export const reportWebVitals = hoist(userland, 'reportWebVitals'); // Re-export legacy methods. export const unstable_getStaticProps = hoist(userland, 'unstable_getStaticProps'); export const unstable_getStaticPaths = hoist(userland, 'unstable_getStaticPaths'); export const unstable_getStaticParams = hoist(userland, 'unstable_getStaticParams'); export const unstable_getServerProps = hoist(userland, 'unstable_getServerProps'); export const unstable_getServerSideProps = hoist(userland, 'unstable_getServerSideProps'); // Create and export the route module that will be consumed. export const routeModule = new PagesRouteModule({ definition: { kind: RouteKind.PAGES, page: "/_error", pathname: "/_error", // The following aren't used in production. bundlePath: '', filename: '' }, components: { App, Document }, userland }); //# sourceMappingURL=pages.js.map

INNER_PAGE는 모듈 ID에 존재하던 값이고, [project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/error.js [ssr] (ecmascript) <facade>이었다. next/error.js가 생겨난 게 resolving 실패 때문이라는 건 헛발이었지만, 그래도 소득은 있었다. 이 로그가 찍힌 건 /_error 페이지를 렌더링하는 도중이라는 걸 알게 됐다. /를 렌더링하려고 했지만 오류가 발생했고, /_error 페이지를 대신 렌더링하려고 했지만 또 다른 오류가 발생한 것이다. 내 목표는 /를 고치는 것이므로 브라우저에 찍힌 로그를 봤다.

[root of the server]__649e74._.js:19670 Uncaught (in promise) ReferenceError: module is not defined at [root of the server]…649e74._.js:19670:1 at [next]/entry/page-loader.ts { PAGE => "[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [client] (:3000/ecmascript) <f…649e74._.js:19679:3) at runtime-base.ts:347:21

에러의 스택 트레이스를 따라갔더니,

"[next]/entry/page-loader.ts { PAGE => \"[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [client] (ecmascript) <facade>\" } [client] (ecmascript) <module evaluation>": (({ r: __turbopack_require__, f: __turbopack_module_context__, i: __turbopack_import__, s: __turbopack_esm__, v: __turbopack_export_value__, n: __turbopack_export_namespace__, c: __turbopack_cache__, M: __turbopack_modules__, l: __turbopack_load__, j: __turbopack_dynamic__, P: __turbopack_resolve_absolute_path__, U: __turbopack_relative_url__, R: __turbopack_resolve_module_id_path__, g: global, __dirname, k: __turbopack_refresh__ }) => (() => { "use strict"; __turbopack_esm__({ "PAGE_PATH": [ ()=>PAGE_PATH, (v)=>PAGE_PATH = v ] }); "module evaluation"; const PAGE_PATH = "/_app"; (window.__NEXT_P = window.__NEXT_P || []).push([ PAGE_PATH, ()=>{ return __turbopack_require__("[project]/node_modules/.pnpm/file+..+nextpack+tarballs+next.tar_react-dom@18.2.0_react@18.2.0/node_modules/next/app.js [client] (ecmascript) <facade>"); } ]); if (module.hot) { module.hot.dispose(function() { window.__NEXT_P.push([ PAGE_PATH ]); }); } ; })()),

과 같은 코드가 나왔다. if (module.hot)에서 module이 정의되지 않았다는 에러가 뜬 것이다. CommonJS 파일이 제대로 탐지가 안 된 것 같아서 cjs_findnermodule.hot 감지 로직을 추가했다.

fn visit_member_expr(&mut self, e: &MemberExpr) { if let Expr::Ident(obj) = &*e.obj { if let MemberProp::Ident(prop) = &e.prop { // Detect `module.exports` and `exports.__esModule` if (!self.ignore_module && &*obj.sym == "module" && matches!(&*prop.sym, "exports" | "hot")) || (!self.ignore_exports && &*obj.sym == "exports") { self.found = true; return; } } } e.obj.visit_with(self); e.prop.visit_with(self); }

그러니까 첫번째 에러가 바뀌었다.

- Execution of get_written_endpoint_with_issues failed - Execution of <AppEndpoint as Endpoint>::write_to_disk failed - Failed to write app endpoint /page - Execution of Project::emit_all_output_assets failed - Execution of VersionedContentMap::insert_output_assets failed - Execution of VersionedContentMap::compute_entry failed - Execution of all_assets_from_entries failed - Execution of AppEndpointOutput::output_assets failed - Execution of AppEndpoint::output failed - Execution of get_app_client_references_chunks failed - Execution of <BrowserChunkingContext as ChunkingContext>::chunk_group failed - Execution of graph_node_to_referenced_nodes_with_available_chunk_items failed - Execution of graph_node_to_referenced_nodes failed - Execution of <CssModuleAsset as Module>::references failed - Execution of parse_css failed - Execution of <PostCssTransformedAsset as Asset>::content failed - Execution of PostCssTransformedAsset::process failed - creating new process - Node.js process didn't send the expected ready signal] { code: 'GenericFailure' } }

터보팩은 각 스크립트에 대해서 node.js를 실행하는 대신 node.js 커스텀 스크립트로 띄운 뒤 그 스크립트와 통신하면서 여러 가지 코드를 실행한다.

디버깅하다보니 ipc/evaluate.tsrun 을 내보내지 않는 이슈가 있었고 resolver가 적용되지 않는 것일까 싶어서 몇가지 코드를 추가했는데 아니었다.

<facade> 모듈이 export * from "<exports>"를 하는데 최종 청크에서 export *가 통채로 사라져 버리는 것이 문제였다.

피곤해서 이 작업은 여기까지 하기로 했다.


소스맵 관련된 Regression 수정

sourceMappingURL은 있는데 소스맵 파일이 없는 경우에 에러를 뱉는 대신 로그만 찍고 컴파일은 계속 진행하게 변경했다. 일부 라이브러리가 소스맵을 생성한 뒤 npmignore 등으로 npm패키지에는 올리지 않아서 깨지는 경우가 있었기 때문이다.

SWC 예제 bugfix

이슈 보고 고치기까지 1분이 안 걸렸다.

next-swc: private property 버그 수정

저녁 먹고 와서 잠깐 봤다.