TypeError: Cannot read property 'parts/Globals.js' of undefined

[jd327]

Expected behaviour

Highcharts loads.

Actual behaviour

Highcharts doesn't load.

Live demo with steps to reproduce

It's hard to give a live demo as this is happening in our Next.js repo.
This is the code we use:

import Highcharts from 'highcharts/highstock';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsReact from 'highcharts-react-official';

HighchartsExporting(Highcharts);

Pretty much exactly what the README says to do (with the addition of highcharts-react-official). The error we get is:

TypeError: Cannot read property 'parts/Globals.js' of undefined
    at /project/node_modules/highcharts/modules/exporting.js:10:408

Product version

"highcharts": "^7.1.1",
"highcharts-react-official": "^2.1.3",

I also noticed this similar issue, but both Highcharts and Exporting module is coming from the same repo, so not sure if this affects us: #10465

Affected browser(s)

Error shows up in the server console log & browser, since Next.js is a universal app.

[pawelfus]

Hi @ivanakimov

Thanks for reporting the issue. As you found out, this is caused by mismatching versions (e.g. Highcharts v7.0 and modules for v7.1) - for example one file is cached, other was updated properly. Nothing else comes to my mind. Could you make sure that installed version of Highcharts is v7.1.1?

import Highcharts from 'highcharts/highstock';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsReact from 'highcharts-react-official';

console.log(Highcharts.version);

HighchartsExporting(Highcharts);

If the version is the same, then could you perhaps setup a git repo with simplified demo of the issue? Anything that helps us debug the issue is more than welcome.

[jd327]

Hi @pawelfus,

Thanks for the quick response. For some reason I get undefined when doing console.log(Highcharts.version); but here's a quick repo to reproduce:

https://github.com/ivanakimov/next-highcharts

[pawelfus]

Thanks for the demo! It's broken for me too.

@jon-a-nygaard - could you take a look?

[jd327]

@pawelfus @jon-a-nygaard I very much appreciate the insane amount of free open-source work going into this project, but wanted to see if you guys had any rough estimate for how long patching something like this might take? 😅

[jon-a-nygaard]

Hi, for me it seems to be something wrong with the documentation for highcharts-react.

Highcharts waits until it has access to a window and document before it constructs itself, and it can not be extended with modules until this is done as it does not exist. A suitable place for this may be in the componentDidMount, but that unfortunately happens after HighchartsReact has rendered the chart.
I tested with earlier version v7.0.0 as well, and it seems that this usage pattern did not work then either.

@pawelfus Do you know if this worked properly before? I can not find a demo of this.

@ivanakimov Unfortunately I can not give a good estimate yet as I am still unsure what actions we need to resolve the issue, but I hope we can have this clear soon.

[jd327]

@jon-a-nygaard I see, got it. Please let me know if you'd like me to do/test anything else once you guys figure out a bit more.

[KacperMadej]

@ivanakimov
The problem was previously reported and solved in here: highcharts/highcharts-react#76 (comment)

In short: the code runs twice and we don't want it to initialize the modules on server side, so add a check and all should be fine. This code for index.js runs fine in your app:

import React, { Component } from 'react';
import Highcharts from 'highcharts/highstock';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsReact from 'highcharts-react-official';


if (typeof Highcharts === 'object') {
    HighchartsExporting(Highcharts)
}

export default class Chart extends Component {

  render() {
    return (
      <HighchartsReact highcharts={Highcharts}  options={{}} />
    );
  }

}

I would like to close the issue as a duplicate and resolved, but I'll wait first for your replies.

[jon-a-nygaard]

Thanks @KacperMadej!

For me it makes sense to close it as a duplicate unless there is more to add to this issue.
Although the readme in highcharts-react should probably be updated to avoid similar issues being reported in the future.

[jd327]

@KacperMadej confirmed -- thank you all for taking a look!
I think adding anything to the readme to mention this Next.js quirk would help others 💪

[sebastianbochan]

@ppotaczek can you update docs in README ?

[ppotaczek]

@sebastianbochan,

Sure, I think that is a good idea. Maybe it is worth to add that information to the other wrapper docs as well? @Denyllon, @KacperMadej

[Denyllon]

I've just added a reference to this thread inside of related highcharts-vue wrapper issue, and attached the same solution there. I think that's enough, because the problem currently exists just on this one case, so it's not necessary to extend the documentation with any additional informations.
In my opinion, the 'Issues' section is the best place to keep informations like that.

What do you think @KacperMadej?

[KacperMadej]

All people responsible for the wrappers know the problem now, so we'll be able to answer similar cases fast through support channels. The problem was never before reported successfully in context of any other environment that React, so adding this to docs or even FAQ for Vue or Angular wrappers might be an overkill. I'll ensure that the info will added to Knowledge Base on Freshdesk.

In short: I agree with Daniel. KB in Freshdesk case will be created soon (after or even before the official launch of Highcharts Freshdesk).

[richardeschloss]

Hi @KacperMadej (and all), I think I just came up with a much simpler solution that both you and your users may like more. It's captured in PR #137.

So, rather than having to be burdened with updating the docs and FAQs, the docs could actually be slimmed down with a ".use" method defined on the wrapper, and let the wrapper register any supported feature with options. The ".use" method captured the bulk of the solutions described in this thread so that users of the HighchartsVue wrapper can simply do:

import HighchartsVue from 'highcharts-vue' 
HighchartsVue.use('stockChart') 

In the PR, I also updated the README which was able to be reduced because of this. Going forward, it may be more adaptable if the wrapper also exposed a "supportedFeatures" to perhaps be used by an IDE's intellisense.

I'll happy to hear your feedback.

[KacperMadej]

Hi @richardeschloss

Thank you for the PR. Highcharts Vue wrapper developers and maintainers will be taking care of the PR and should provide more info there when available.

Updating docs and FAQs are not a problem. It is more important for us that all developers and maintainers of the wrappers know the issue because technical support very often must provide answers even for the questions already answered in docs and FAQs. BTW Next.js removed the relevant FAQ entry about the problem, so maybe it was resolved.

[richardeschloss]

Hi! I appreciate your response and perspective! For me, I was using the Nuxt framework (which is like Next.js, but for Vue), and I was encountering this issue too. I realized that while the "highcharts is object" check worked, it was even easier to configure Nuxt to only have the highcharts run client-side (example here). (In Nuxt, the framework respects the naming convention of plugin files ending in ".client.js" and ".server.js"; so simply naming my plugin "globals.client.js" was a simple fix for me).

[fiorins]

Thanks to @KacperMadej for the reply, and it resolve my issue too, but I think it's more important update the React/Angular wrapper documentation with this workaround for this known problem since it's been from 2019 it shows up and i don't find anything about it in the official page of installation.

[raf18seb]

Hi @fiorins, the info has already been added to our React/Angular wrapper docs, see:

• React https://github.com/highcharts/highcharts-react#highcharts-with-nextjs
• Angular https://github.com/highcharts/highcharts-angular#angular-universal---ssr

Am I missing something?