next.js
next.js copied to clipboard
vercel
Production build crashes on Next version >= 14.0.2 when CryptoJS module is used on frontend
Link to the code that reproduces this issue
To Reproduce
- Run dev to make sure the app works
- Run build
- Run start - error will occur
Current vs. Expected behavior
Hello, Next community,
I wanted to report a bug that was introduced in Next v14.0.2. The error reported on the frontend is:
Application error: a client-side exception has occurred (see the browser console for more information).
When opening the console there's an uncaught Promise error on calling Math.sqrt function. Tbh, I have no idea what could cause this issue. Because of that, I've attached a video recording of my production build, hoping a more experienced NextJs engineer could tell me more about why this is happening.
Since this information provides little, to no information, and after reading the text above, you would probably say something like "Dude, I wish you all the luck of this world to solve this, but I have no f*cking idea what the hell is going on.", I've decided to test a couple of canary releases to reduce the search space to the smallest amount possible.
Running on the latest canary release at the time of writing (14.0.4-canary.3) still has this issue. So I've done an interpolation search on the 14.0.2 canaries:
- 14.0.2-canary.1 ✅
- 14.0.2-canary.10 ✅
- 14.0.2-canary.20 ❌
- 14.0.2-canary.15 ✅
- 14.0.2-canary.18 ✅
- 14.0.2-canary.19 ❌ 👈
By looking at the release notes of 14.0.2-canary.19 I think one of these PRs could cause this issue:
- https://github.com/vercel/next.js/pull/58130
- https://github.com/vercel/next.js/pull/57908
I hope this small research of mine helped, and that it will be fixed soon. Thank you 🙏 For now, I'm running my app on v14.0.1 without any issues.
Edit
The issue is related to CryptoJS module being used on front end.
https://github.com/vercel/next.js/assets/24474083/8efbeb87-3e16-4304-9d9f-fa6464fd6566
Verify canary release
- [X] I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.1.0: Mon Oct 9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
Binaries:
Node: 20.9.0
npm: 10.1.0
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 14.0.2-canary.19
eslint-config-next: 14.0.1
react: 18.2.0
react-dom: 18.2.0
typescript: 5.2.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
App Router
Additional context
No response
It seems like this problem effects a lot of packages. Since upgrading to NextJS >= 14, many imports are broken. Other packages like parse, https://www.npmjs.com/package/@hashgraph/sdk, crypto packages, etc.
The new version feels incredibly unstable, slow, and memory intensive. The last "stable" version was 13.4.10 which at least let you opt out of the App Router.
It seems like this problem effects a lot of packages. Since upgrading to NextJS >= 14, many imports are broken. Other packages like
parse, https://www.npmjs.com/package/@hashgraph/sdk, crypto packages, etc.The new version feels incredibly unstable, slow, and memory intensive. The last "stable" version was
13.4.10which at least let you opt out of the App Router.
I agree. I'm having tremendous issues with Turbopack. To change a route it needs minutes. I've had to switch to webpack because of that
As a quick fix, setting swcMinify to false fixes the issue in production in my project (14.0.3)
/** @type {import('next').NextConfig} */
module.exports = {
// ...other settings,
swcMinify: false,
};
Same issue with crypto js, swcMinify false solves the crash at loading the app, however, when using crypto js the app crashes on production, development works fine
Not using Next anymore because I need stability. That being said: is this still an issue in the latest release?
Not using Next anymore because I need stability. That being said: is this still an issue in the latest release?
It is enough stable with best features for any website or developers if you know the potential and possibilities of nextjs
Not using Next anymore because I need stability. That being said: is this still an issue in the latest release?
It is enough stable with best features for any website or developers if you know the potential and possibilities of nextjs
I am very familiar with it. No need to assume I don't know it babe 😘
My firebase admin sdk cannot fetch data on request after deployment to vercel but works fine on development mode. It only fetche data once and remain cached.
Not using Next anymore because I need stability. That being said: is this still an issue in the latest release?
Before discussing Next.js further, it's crucial to conduct a comprehensive study on its functionalities and consider that issues related to third-party libraries are common, emphasizing the importance of thorough research before implementation.
Turning of swc just fixed the build issue for me, but the crypto-hash function I need runs in runtime (with rsc), and when generating the static routes it crashes again for the same reason.
What's happen to NextJS ? I started develop with this frameworks few years ago with no stability issues like we have today, I started a new project with NextJS 14.04 and I need to fight with a lot of build errors with third-party packages and so on !
I got this working by using crypto directly from node https://github.com/apollographql/apollo-client/issues/11551#issuecomment-1921676820