Highcharts: TypeError：未定義のプロパティ 'parts /Globals.js'を読み取れません

こんにちは@ivanakimov

問題を報告していただきありがとうございます。 ご存知のとおり、これはバージョンの不一致が原因です（たとえば、Highcharts v7.0とv7.1のモジュール）。たとえば、1つのファイルがキャッシュされ、他のファイルが適切に更新されました。 他に何も思い浮かびません。 インストールされているHighchartsのバージョンが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);

バージョンが同じである場合、問題の簡略化されたデモを使用してgitリポジトリをセットアップできますか？ 問題のデバッグに役立つものは何でも大歓迎です。

こんにちは@pawelfus 、

迅速な対応に感謝致します。 何らかの理由で、 undefinedを実行するとconsole.log(Highcharts.version);が表示されますが、再現するための簡単なリポジトリは次のとおりです。

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

デモをありがとう！ それは私にとっても壊れています。

@ jon-a-nygaard-見ていただけませんか？

@pawelfus @ jon-a-nygaardこのプロジェクトに投入された非常に多くの無料のオープンソース作業に非常に感謝していますが、このようなパッチの適用にかかる時間の概算がないかどうかを確認したいと思いますか？ ：sweat_smile：

こんにちは、私にとっては、highcharts-reactのドキュメントに何か問題があるようです。

Highchartsは、ウィンドウとドキュメントにアクセスできるようになるまで待機してから構築します。モジュールが存在しないため、これが完了するまでモジュールで拡張することはできません。 これに適した場所はcomponentDidMountですが、残念ながら、HighchartsReactがグラフをレンダリングした後に発生します。
以前のバージョンv7.0.0でもテストしましたが、この使用パターンも機能しなかったようです。

@pawelfusこれが以前に正しく機能したかどうか知っていますか？ これのデモが見つかりません。

@ivanakimov残念ながら、問題を解決するために必要なアクションがまだわからないため、まだ適切な見積もりを出すことはできませんが、すぐにこれを明確にできることを願っています。

@ jon-a-nygaardなるほど、わかりました。 皆さんがもう少し理解したら、他に何かをしたりテストしたりしたい場合はお知らせください。

@ivanakimov
この問題は以前に報告され、ここで解決されました： https ：

つまり、コードは2回実行され、サーバー側でモジュールを初期化したくないので、チェックを追加すればすべて問題ないはずです。 index.jsこのコードは、アプリで正常に実行されます。

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={{}} />
    );
  }

}

問題を重複して解決したいと思いますが、最初に返信をお待ちしています。

ありがとう@KacperMadej！

私にとっては、この問題に追加するものがない限り、複製として閉じるのが理にかなっています。
ただし、highcharts-reactのreadmeは、今後同様の問題が報告されないように更新する必要があります。

@KacperMadejが確認しました-
このNext.jsの癖に言及するためにreadmeに何かを追加すると、他の人に役立つと思います：muscle：

@ppotaczek READMEのドキュメントを更新できますか？

@sebastianbochan 、

確かに、それは良い考えだと思います。 たぶん、その情報を他のラッパードキュメントにも追加する価値がありますか？ @ Denyllon 、 @ KacperMadej

関連するhighcharts-vueラッパーの問題の中にこのスレッドへの参照を追加し、同じソリューションをそこに添付しました。 現在、問題はこの1つのケースにのみ存在するため、これで十分だと思います。したがって、追加情報を使用してドキュメントを拡張する必要はありません。
私の意見では、「問題」セクションはそのような情報を保持するのに最適な場所です。

@KacperMadejはどう思いますか？

ラッパーの責任者全員が問題を認識しているため、サポートチャネルを通じて同様のケースに迅速に対応できるようになります。 この問題は、Reactの他の環境で正常に報告されたことはありませんでした。そのため、これをドキュメントに追加したり、VueまたはAngularラッパーのFAQを追加したりするのはやり過ぎかもしれません。 情報がFreshdeskのナレッジベースに追加されることを確認します。

要するに：私はダニエルに同意します。 FreshdeskケースのKBは、まもなく作成されます（Highcharts Freshdeskの正式なリリース後またはその前でも）。

こんにちは@KacperMadej （そしてすべて）、私はあなたとあなたのユーザーの両方がもっと好きかもしれないはるかに簡単な解決策を思いついたと思います。 PR＃137でキャプチャされています。

そのため、ドキュメントやFAQの更新に煩わされることなく、ラッパーで定義された「.use」メソッドを使用してドキュメントを実際にスリム化し、サポートされている機能をオプションでラッパーに登録させることができます。 「.use」メソッドは、このスレッドで説明されているソリューションの大部分をキャプチャしたため、HighchartsVueラッパーのユーザーは次のことを簡単に実行できます。

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

PRでは、このために削減できたREADMEも更新しました。 将来的には、ラッパーが「supportedFeatures」を公開して、おそらくIDEのインテリセンスで使用できるようにすると、より適応性が高くなる可能性があります。

フィードバックをお待ちしております。

こんにちは@richardeschloss

PRありがとうございます。 Highcharts Vueラッパーの開発者とメンテナーがPRを担当し、利用可能な場合はそこでより多くの情報を提供する必要があります。

ドキュメントとFAQの更新は問題ではありません。 ドキュメントやFAQですでに回答されている質問に対してもテクニカルサポートが回答を提供しなければならないことが非常に多いため、ラッパーのすべての開発者とメンテナーが問題を知っていることが私たちにとってより重要です。 ところで、Next.jsは問題に関連するFAQエントリを削除したので、おそらく解決されました。

こんにちは！ あなたの反応と視点に感謝します！ 私にとっては、Nuxtフレームワーク（Next.jsに似ていますが、Vue用）を使用していましたが、この問題も発生していました。 「highchartsisobject」チェックは機能しましたが、highchartsをクライアント側でのみ実行するようにNuxtを構成する方がさらに簡単であることに気付きました（ここの例）。 （Nuxtでは、フレームワークは「.client.js」と「.server.js」で終わるプラグインファイルの命名規則を尊重します。したがって、プラグインに「globals.client.js」という名前を付けるだけで簡単に修正できました）。