🔖

[Next] TypeError: Cannot read properties of undefined (reading 'uid')

2022/02/15に公開約5,100字

エラー

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')

https://github.com/vercel/next.js/issues/33003

canaryバージョンで修正されてるから、そっちで実行してみてと言われてる。

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!

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/nftgracefull-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/nftgracefull-fsパッチ対応PRがマージされた。

https://github.com/vercel/nft/pull/258

対応2

vercel/next.jsの最新バージョン(canaly)にて、vercel/nftバージョンアップPRがマージされた。

https://github.com/vercel/next.js/pull/33048

対応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までは3日ほどで対応していた。
Nextjsのコントリビューターのstyfleさんには、感謝です。

https://github.com/styfle

参考

https://github.com/vercel/next.js/issues/33003

Discussion

ログインするとコメントできます