일본 한달살이 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__binding
가 undefined
였다는 소리고, 초기화 로직은
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
에서 module
이 undefined
라 실패하는 것이었다. 이 경우 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_findner
에 module.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.ts
가 run
을 내보내지 않는 이슈가 있었고 resolver
가 적용되지 않는 것일까 싶어서 몇가지 코드를 추가했는데 아니었다.
<facade>
모듈이 export * from "<exports>"
를 하는데 최종 청크에서 export *
가 통채로 사라져 버리는 것이 문제였다.
피곤해서 이 작업은 여기까지 하기로 했다.
소스맵 관련된 Regression 수정
sourceMappingURL
은 있는데 소스맵 파일이 없는 경우에 에러를 뱉는 대신 로그만 찍고 컴파일은 계속 진행하게 변경했다. 일부 라이브러리가 소스맵을 생성한 뒤 npmignore 등으로 npm패키지에는 올리지 않아서 깨지는 경우가 있었기 때문이다.
SWC 예제 bugfix
이슈 보고 고치기까지 1분이 안 걸렸다.
next-swc: private property 버그 수정
저녁 먹고 와서 잠깐 봤다.