[Next] TypeError: Cannot read properties of undefined (reading 'uid')
エラー
nextのプロジェクトを作成した際に、buildでコケた。
気になったので、原因を深堀りしてみた。
$ npm run build
> kenken@0.1.0 build
> next build
info - Loaded env from /Users/kenbu/src/github.com/kenken/kenken/.env.local
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Using external babel configuration from /Users/kenbu/src/github.com/kenken/kenken/.babelrc.js
info - Creating an optimized production build
Failed to compile.
./ui/components/sidebar/sidebar.tsx
TypeError: Cannot read properties of undefined (reading 'uid')
> Build error occurred
Error: > Build failed because of webpack errors
at /Users/kenbu/src/github.com/kenken/kenken/node_modules/next/dist/build/index.js:397:19
at async Span.traceAsyncFn (/Users/kenbu/src/github.com/kenken/kenken/node_modules/next/dist/telemetry/trace/trace.js:60:20)
at async Object.build [as default] (/Users/kenbu/src/github.com/kenken/kenken/node_modules/next/dist/build/index.js:77:25)
解決方法
next.jsのDiscussionにて、同じ事象が議論されてた。
I have a Cypress Typescript with Cucumber project and all of a sudden it started to throw the below exception
TypeError: Cannot read properties of undefined (reading 'uid')
canaryバージョンで修正されてるから、そっちで実行してみてと言われてる。
Please try the latest release v12.0.8-canary.19 using
yarn add next@canaryornpm install next@canaryto confirm that the issue is fixed, thanks!
npm installしてみる。
npm install next@canary
npm run buildしてみる。
$ npm run build
> kenken@0.1.0 build
> next build
info - Loaded env from /Users/kenken/src/github.com/kenken/kenken/.env.local
info - Checking validity of types
info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc.js" https://nextjs.org/docs/messages/swc-disabled
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (16/16)
info - Finalizing page optimization
Page Size First Load JS
┌ ○ / 5.46 kB 389 kB
├ /_app 0 B 366 kB
├ ○ /404 2.84 kB 369 kB
├ ○ /admins 1.32 kB 393 kB
├ ○ /admins/[id] 1.6 kB 389 kB
├ ○ /admins/create 2.35 kB 390 kB
├ ○ /announcements 1.71 kB 393 kB
├ ○ /announcements/[id] 3.03 kB 472 kB
├ ○ /announcements/create 2.9 kB 472 kB
├ λ /api/login 0 B 366 kB
├ λ /api/logout 0 B 366 kB
├ ○ /items 2.7 kB 394 kB
├ ○ /items/[id] 104 kB 491 kB
├ ○ /login 2.7 kB 369 kB
├ ○ /outfits 2.47 kB 394 kB
├ ○ /outfits/[id] 2.85 kB 391 kB
├ ○ /users 2.4 kB 394 kB
└ ○ /users/[id] 6 kB 389 kB
+ First Load JS shared by all 366 kB
├ chunks/framework-5f4595e5518b5600.js 42 kB
├ chunks/main-1dafa9e4cfedb045.js 25.1 kB
├ chunks/pages/_app-785be7715ce4f304.js 297 kB
├ chunks/webpack-7e52f426bc18a4e6.js 1.55 kB
└ css/7d35bd36dbfd4e86.css 4.48 kB
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
canaryバージョンではあるが、buildが通った。
原因
Descussionを深堀りしてみた。
ご興味があれば。
根本原因
vercel/next.jsは、vercel/nftに依存しており、vercel/nftでgracefull-fsのパッチ未対応であった。この対応をstyfleさんがしてくれていた。
As debugged in browserify/resolve#264, resolve v1.21 introduces a change in behaviour which in turn breaks graceful-fs. A fix in graceful-fs is released with v4.2.9, but nft seems to be bundling a lower version.
As this potentially breaks a lot of next.js babel-setups (see f.e. vercel/next.js#33003), a rerelease with the fixed graceful-fs-package would be great!
対応1
vercel/nftにgracefull-fsのパッチ対応PRがマージされた。
対応2
vercel/next.jsの最新バージョン（canaly）にて、vercel/nftバージョンアップPRがマージされた。
対応3
vercel/next.js最新バージョンにデポプロイされたので、最新のvercel/next.jsを指定してねとコメント。
Please try the latest release v12.0.8-canary.19 using yarn add next@canary or npm install next@canary to confirm that the issue is fixed, thanks!
https://github.com/vercel/next.js/issues/33003#issuecomment-1006791998
終わりに
今回のissue起票から、対応1〜３までは3日ほどで対応していた。
Nextjsのコントリビューターのstyfleさんには、感謝です。
参考
Discussion