nx: Command to build Next.js for Vercel errors out
Current Behavior
Command fails
Expected Behavior
I expected it to build my project successfully
Steps to Reproduce
Repo: https://github.com/Xenfo/atomic Try to deploy it to Vercel following the guide in the NX Next.js docs.
Failure Logs
❯ nx build frontend --prod --outputPath=.
> nx run frontend:build:production --outputPath=.
info - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Using external babel configuration from /home/xenfo/Desktop/Projects/atomic/apps/frontend/.babelrc
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (3/3)
info - Finalizing page optimization
Page Size First Load JS
┌ ○ / 1.22 kB 68.4 kB
├ └ css/f06ddab96869c260cfa8.css 20 B
├ /_app 0 B 67.2 kB
└ ○ /404 3.73 kB 70.9 kB
+ First Load JS shared by all 67.2 kB
├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.9f24d5.js 13.6 kB
├ chunks/framework.0c3b20.js 41.8 kB
├ chunks/main.bab312.js 6.95 kB
├ chunks/pages/_app.4b9835.js 4.15 kB
├ chunks/webpack.50bee0.js 751 B
└ css/48cbfac088811e35fdc5.css 667 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)
———————————————————————————————————————————————
> NX ERROR Running target "frontend:build" failed
Failed tasks:
- frontend:build:production
> NX CLOUD See run details at ...
Environment
Node : 14.15.5
OS : linux x64
yarn : 1.22.5
nx : Not Found
@nrwl/angular : Not Found
@nrwl/cli : 12.3.4
@nrwl/cypress : 12.3.4
@nrwl/devkit : 12.3.4
@nrwl/eslint-plugin-nx : 12.3.4
@nrwl/express : 12.3.4
@nrwl/jest : 12.3.4
@nrwl/linter : 12.3.4
@nrwl/nest : Not Found
@nrwl/next : 12.3.4
@nrwl/node : 12.3.4
@nrwl/react : 12.3.4
@nrwl/schematics : Not Found
@nrwl/tao : 12.3.4
@nrwl/web : 12.3.4
@nrwl/workspace : 12.3.4
@nrwl/storybook : 12.3.4
@nrwl/gatsby : Not Found
typescript : 4.2.4
Workaround from Vercel
Set custom build command to: npx nx build my-app --prod
Set output directory to: dist/apps/my-app/.next
Note for this to work you must have NX Cloud off as far as I can tell
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 1
- Comments: 20 (2 by maintainers)
@hcharley Just want to note that when Vercel tries to build with NX build cache it fails, so if you try to rebuild it probably won’t work.
@Xenfo I can confirm that using the cache fails with my method.
Without the cache, my method still works.
It’s still a workaround, so yes @kirjai understanding why
--outputPath=.is not working, would be helpful.I can confirm I’m seeing the same problem with my own freshly created repo.
This fails:
This works:
You can try this locally as well. It is not just happening on Vercel, for me.
I’ve switched to using the solution mentioned last by @Bodom78 which felt cleaner:
https://github.com/nrwl/nx/issues/5660#issuecomment-841639368
hcharley’s method worked for me I’ll be trying DuyBui1993’s method later.
Got hit by this issue as well, this solution at least allowed me to get the build working on Vercel.
After upgrade
@nrwl/*from version12.1.1to12.3.4, my vercel website got build failed too.I got vercel build working by using this workaround