以下エラーが出てBuildができない場合の対処方法のメモ
発生したエラー
❯ yarn build 7.3s Thu Apr 22 12:00:15 2021
info - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
Failed to compile.
ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/pcuser/Documents/GitHub/country-shrine-map/node_modules/@babel/runtime/helpers/construct' in '/Users/pcuser/Documents/GitHub/country-shrine-map/.yarn/$$virtual/next-virtual-eb3227ff4d/0/cache/next-npm-10.1.3-435c930891-7e12ae9ea2.zip/node_modules/next/dist/client'
> Build error occurred
Error: > Build failed because of webpack errors
at /Users/pcuser/Documents/GitHub/country-shrine-map/.yarn/$$virtual/next-virtual-eb3227ff4d/0/cache/next-npm-10.1.3-435c930891-7e12ae9ea2.zip/node_modules/next/dist/build/index.js:17:924
at processTicksAndRejections (node:internal/process/task_queues:94:5)
at async Span.traceAsyncFn (/Users/pcuser/Documents/GitHub/country-shrine-map/.yarn/$$virtual/next-virtual-eb3227ff4d/0/cache/next-npm-10.1.3-435c930891-7e12ae9ea2.zip/node_modules/next/dist/telemetry/trace/trace.js:5:584)
対処方法
webpack 4だと必要なモジュールがないためエラーになるのでwebpack 5を有効化する。
エラー時にInfoで出力されていたURLを確認しnext.config.jsにfutureの設定を記述する。
module.exports = {
future: {
webpack5: true,
},
}
確認方法
こんな感じのログが出ればOK
❯ yarn build 59.6s Thu Apr 22 12:06:13 2021
info - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (4/4)
info - Finalizing page optimization
Page Size First Load JS
┌ ○ / 310 B 64.8 kB
├ ○ /404 3.44 kB 67.9 kB
└ ○ /second 310 B 64.8 kB
+ First Load JS shared by all 64.5 kB
├ chunks/210.af2b05.js 6.82 kB
├ chunks/759.8e4335.js 13.5 kB
├ chunks/framework.281044.js 42 kB
├ chunks/main.3f7708.js 152 B
├ chunks/pages/_app.361545.js 1.03 kB
└ chunks/webpack.8b2eb6.js 909 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
development/nodejs
↧