Nextjs 14 introduced issue with highcharts

[olsio]

Link to the code that reproduces this issue

https://github.com/olsio/prerender-highcharts

To Reproduce

1. npm run build

npm run build

> [email protected] build
> next build

   ▲ Next.js 14.0.3-canary.5

(node:50591) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ✓ Creating an optimized production build
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
   Generating static pages (0/6)  [    ]TypeError: Cannot read properties of undefined (reading 'document')
    at /Users/olivers/project/prerender-highcharts/.next/server/app/chart/page.js:1:5649
    at 9295 (/Users/olivers/project/prerender-highcharts/.next/server/app/chart/page.js:1:5734)
    at t (/Users/olivers/project/prerender-highcharts/.next/server/webpack-runtime.js:1:127)
    at 1598 (/Users/olivers/project/prerender-highcharts/.next/server/app/chart/page.js:1:2513)
    at t (/Users/olivers/project/prerender-highcharts/.next/server/webpack-runtime.js:1:127)
    at F (/Users/olivers/project/prerender-highcharts/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:91984)
    at /Users/olivers/project/prerender-highcharts/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94399
    at W._fromJSON (/Users/olivers/project/prerender-highcharts/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94837)
    at JSON.parse (<anonymous>)
    at N (/Users/olivers/project/prerender-highcharts/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:91705)

Error occurred prerendering page "/chart". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'document')
    at /Users/olivers/project/prerender-highcharts/.next/server/app/chart/page.js:1:5649
    at 9295 (/Users/olivers/project/prerender-highcharts/.next/server/app/chart/page.js:1:5734)
    at t (/Users/olivers/project/prerender-highcharts/.next/server/webpack-runtime.js:1:127)
    at 1598 (/Users/olivers/project/prerender-highcharts/.next/server/app/chart/page.js:1:2513)
    at t (/Users/olivers/project/prerender-highcharts/.next/server/webpack-runtime.js:1:127)
    at F (/Users/olivers/project/prerender-highcharts/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:91984)
    at /Users/olivers/project/prerender-highcharts/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94399
    at W._fromJSON (/Users/olivers/project/prerender-highcharts/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94837)
    at JSON.parse (<anonymous>)
    at N (/Users/olivers/project/prerender-highcharts/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:91705)
 ✓ Generating static pages (6/6)

> Export encountered errors on following paths:
	/chart/page: /chart

Current vs. Expected behavior

This only happens in 14.0.x releases. When downgrading to 13.5.6 it compiles fine.

npm run build

> [email protected] build
> next build

(node:50085) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ✓ Creating an optimized production build
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (6/6)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    5.26 kB        85.8 kB
├ ○ /_not-found                          875 B          81.4 kB
└ ○ /chart                               103 kB          183 kB
+ First Load JS shared by all            80.5 kB
  ├ chunks/472-31d0e6423ed7b0d0.js       27.5 kB
  ├ chunks/fd9d1056-795b72f2db284780.js  51.1 kB
  ├ chunks/main-app-b284407094d61a42.js  230 B
  └ chunks/webpack-1e7db9543276c9d8.js   1.73 kB


○  (Static)  automatically rendered as static HTML (uses no initial props)

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: 21.1.0
  npm: 10.2.0
  Yarn: N/A
  pnpm: 8.10.3
Relevant Packages:
  next: 14.0.3-canary.5
  eslint-config-next: 14.0.2
  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)

Not sure, Standalone mode (output: "standalone")

Additional context

No response

[etrinh]

Have this issue after updating from 14.0.1 to 14.0.2

Also this code doesn't work:

import * as Highcharts from "highcharts";
import HighchartsReact from 'highcharts-react-official';
export const Charts =  (): JSX.Element => {
    return <></>;
    return <HighchartsReact highcharts={Highcharts}/>
}

But this one works:

import * as Highcharts from "highcharts";
import HighchartsReact from 'highcharts-react-official';
export const Charts =  (): JSX.Element => {
    return <></>;
}

[abkfenris]

I had a similar issue in 14.0.2 using react-highcharts-jsx which I was able to fix using next/dynamic with server side rendering disabled to delay loading the Highcharts using component till client side.

Weirdly it seems to only occur with some highcharts usage, not all.

[etrinh]

Stangely, after deleting my node_modules folder, I am not able to reproduce at build time but now at runtime...

> next start

   ▲ Next.js 14.0.2
   - Local:        http://localhost:3000

 ✓ Ready in 530ms
TypeError: Cannot read properties of undefined (reading 'document')
    at D:\Projects\Cloud\frontend\.next\server\chunks\9628.js:1:2975
    at 89295 (D:\Projects\Cloud\frontend\.next\server\chunks\9628.js:1:3060)
    at t (D:\Projects\Cloud\frontend\.next\server\webpack-runtime.js:1:127)
    at 96437 (D:\Projects\Cloud\frontend\.next\server\chunks\6680.js:1:1256)
    at t (D:\Projects\Cloud\frontend\.next\server\webpack-runtime.js:1:127)
    at 56680 (D:\Projects\Cloud\frontend\.next\server\chunks\6680.js:1:4531)
    at t (D:\Projects\Cloud\frontend\.next\server\webpack-runtime.js:1:127)
    at 28656 (D:\Projects\Cloud\frontend\.next\server\chunks\8656.js:1:5709)
    at t (D:\Projects\Cloud\frontend\.next\server\webpack-runtime.js:1:127)
    at 17567 (D:\Projects\Cloud\frontend\.next\server\app\services\assess\page.js:1:2278)

[gcko]

@olsio @abkfenris please check this issue on highcharts, there is some more documentation and workarounds discussed there -> https://github.com/highcharts/highcharts/issues/20129

[sFritsch09]

related to 👉🏼 #58576

[jonxzsh]

any fix for this?

[gcko]

@jonsystems this was fixed on Highcharts' side: https://github.com/highcharts/highcharts/issues/20129

[rart]

We saw same issue with other libraries and 14.0.4 fixed it.

I'm very curious to know what the change was. It seemed client side code was getting executed server side.

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.