У меня есть проект веб-пакета, который строит графики высоких диаграмм во всплывающих окнах 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 снова?