search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.89k stars 26.97k forks source link

Nextjs 14 introduced issue with highcharts #58379

Open olsio opened 12 months ago

olsio commented 12 months ago

Link to the code that reproduces this issue

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

To Reproduce

  1. npm run build
npm run build

> prerender-highcharts@0.1.0 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

> prerender-highcharts@0.1.0 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

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 commented 12 months ago

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 commented 12 months ago

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 commented 12 months ago

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 commented 11 months ago

@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 commented 11 months ago

related to 👉🏼 #58576

jonxzsh commented 11 months ago

any fix for this?

gcko commented 10 months ago

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

rart commented 10 months ago

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.