highcharts / highcharts/highcharts-react
Bug: highcharts/esm/highcharts.src.js crashes in Next.js/Webpack app, while highcharts/highcharts.src.js works
- Dominant language
- JavaScript
- Stars
- 1.2k
- Forks
- 111
- Avg merge
- 9h 25m
- Merged PRs (30d)
- 2
Description
Note, originally posted here: https://github.com/highcharts/highcharts-react/issues/566
But realized perhaps belongs in this repo
#### Expected behaviour
Importing Highcharts through `@highcharts/react` (which resolves to `highcharts/esm/highcharts.src.js`) should work in a Next.js app build/runtime without additional webpack aliasing.
Charts should render normally, and the app should not crash at runtime.
#### Actual behaviour
The app crashes when the Highcharts ESM path is used:
- problematic path: `highcharts/esm/highcharts.src.js`
- observed in client bundle/runtime (not an SSR-only failure)
- observed runtime error: `TypeError: undefined is not a non-null object (evaluating '__webpack_require__.r(...)')`
- crash disappears when aliasing:
- `highcharts/esm/highcharts.src.js` -> `highcharts/highcharts.src.js`
In our consumer app, this alias makes charts render successfully and avoids the runtime crash.
#### Context
We maintain a component/design-system library that includes chart components and is consumed by multiple downstream apps.
This issue surfaced in one consumer app (Next.js + webpack) through dependency traversal from our shared library into `@highcharts/react`, even when the consumer app was not actively rendering chart components.
#### Packaging observation
From our investigation:
- `highcharts/esm/highcharts.src.js` appears to be a webpack-prebundled artifact (it includes webpack runtime symbols such as `__webpack_require__`).
- Specifically, the file starts by defining its own webpack runtime scope, including `var __webpack_require__ = {};`.
- `highcharts/highcharts.src.js` is packaged as a UMD build.
- In our consumer setup, aliasing the ESM path to the UMD source entry eliminates the crash.
Our current working theory is that this is a bundler compatibility issue with the specific ESM artifact shape in this environment.
#### Live demo with steps to reproduce
We do not have a public demo URL, but we have a consistent local repro in a Next.js app:
1. Install dependencies and start app normally.
2. Render a page/component that uses chart components from `@highcharts/react` (in our case via a shared component library).
3. Observe runtime crash when `highcharts/esm/highcharts.src.js` is in use.
4. Add webpack alias:
- `highcharts/esm/highcharts.src.js` -> `highcharts/highcharts.src.js`
5. Restart app and load the same chart page.
6. Observe successful render and no crash.
Minimal chart usage we validated:
```tsx
```
#### Product version
Highcharts Core `12.5.0`
`@highcharts/react` `4.x` (resolved in lockfile to `4.2.1`)
#### Affected browser(s)
Reproduced in local development in Chrome (latest).
Given this appears tied to bundling/runtime module resolution, impact may be browser-agnostic once bundle is produced.
### Maintainer guidance requested
Could you confirm whether this is a known issue with the
`highcharts/esm/highcharts.src.js` entry in webpack/Next.js environments?
We currently work around it by aliasing:
`highcharts/esm/highcharts.src.js` -> `highcharts/highcharts.src.js`
Is this the recommended approach, or is there a better supported integration path we should adopt?
If our understanding is off, please correct us on the intended packaging/entrypoint usage for component-library producers with downstream consumers.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.