highcharts / highcharts/highcharts-react

Bug: highcharts/esm/highcharts.src.js crashes in Next.js/Webpack app, while highcharts/highcharts.src.js works

Open
#565 7 comments 2 reactions 1 assignee Claimed by @KamilKubik View on GitHub
bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.