next.js: 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:

By looking at the release notes of 14.0.2-canary.19 I think one of these PRs could cause this issue:

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

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

About this issue

Original URL
State: open
Created 7 months ago
Reactions: 6
Comments: 17

Most upvoted comments

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,
};

leonchabbey on Nov 28, 2023

No worries just ported to remix lol

atridadl on Nov 25, 2023

Not using Next anymore because I need stability. That being said: is this still an issue in the latest release?

atridadl on Dec 7, 2023

Fixed: Just tried is 14.0.4 and its working fine.

APS6 on Dec 8, 2023

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.

kantorcodes on Nov 18, 2023

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 !

fryck on Mar 7, 2024

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 😘

atridadl on Dec 22, 2023