Загрузка highcharts jQuery функций в Webpack - PullRequest
0 голосов
/ 07 января 2020

У меня есть проект веб-пакета, который строит графики высоких диаграмм во всплывающих окнах Leaflet Map. Всплывающие окна создаются на лету, а элементы HTML недоступны для метода Highcharts renderTo, поэтому я пытаюсь использовать решение jQuery $('#container' + uniqueID).highcharts({..}). Это работало нормально вне webpack / modules, однако я продолжаю получать следующую ошибку:

Uncaught TypeError: $(...).highcharts is not a function

Было несколько похожих ответов на этот вопрос, но ни один из них не решил мою проблему или предоставил четкое объяснение. Когда я шагаю по коду, я понимаю следующее в момент выполнения кода:

  • jQuery инициализируется, включая $, jQuery, window.$ and window.jQuery.
  • Highcharts инициализируется и Можно использовать.
  • Я могу заставить код работать, если я загружаю Highcharts как var Highcharts = require('highcharts'); внутри $(document).ready(function() {}); Однако есть переменные, к которым мне нужно обратиться после инициализации, и я хотел бы использовать мои графики функционируют как модуль.
  • Я могу заставить код работать так, как задумано, если я явно импортирую jQuery снова в graphs.js, как показано ниже. Я не понимаю, как / когда jQuery загружается / вводится в область видимости.

webpack.config. js:

  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      'window.jQuery': 'jquery',
      'window.$': 'jquery',
      Highcharts: 'highcharts/highcharts'
    })

графики. js

\\ why is this necessary? 
import $ from 'jquery';
global.$ = global.jQuery = require('jquery');

\\ imports
import * as Papa from 'papaparse';
import moment from 'moment';
import 'moment-timezone';
import * as constants from '../index.js';
import * as Highcharts from 'highcharts';

...
...

function CreatePopupGraph(uniqueID, obj, seriesData) {
    Highcharts.setOptions({global: { useUTC: false } });
    $('#objGraphContainer' + uniqueID).highcharts({
        chart: {
            type: 'column',
            backgroundColor:'#d4d4c9',
            zoomType: 'x',
            resetZoomButton: {
            position: {
                align: 'left', 
                verticalAlign: 'top',
...
...

Когда я вхожу в код, он появляется jQuery был правильно инициализирован, как и старшие чарты. (Без дополнительного импорта в графиках. js). Почему мне нужно явно добавить jQuery снова?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...