使用Webpack打包时无法访问Highcharts.Pointer的技术求助

I’ve run into this exact hiccup before—when using Webpack, Highcharts exposes its internal classes differently compared to loading it directly via a script tag. Let’s break down what’s going wrong and how to fix it:

The Root Cause #

Your current code tries to access HC.Highcharts.Pointer, but when importing Highcharts as an ES module in Webpack, import * as HC already gives you the main Highcharts object. That extra .Highcharts layer is leftover from the global variable approach (where window.Highcharts is the main object), which doesn’t apply in a bundled module context. That’s why you’re getting the Cannot read property 'Pointer' of undefined error—HC.Highcharts simply doesn’t exist here.

The Fix #

Adjust your code to access Pointer directly from the imported Highcharts object:

import * as Highcharts from "highcharts";

// Remove the extra .Highcharts nested access
Highcharts.Pointer.prototype.reset = function () {
  return undefined;
};

console.log("Hello World!");

Alternatively, you can use the default import syntax, which works just as smoothly:

import Highcharts from "highcharts";

Highcharts.Pointer.prototype.reset = function () {
  return undefined;
};

For Older Highcharts Versions #

If you’re using a Highcharts version before v6 (which added proper ES module support), you might need to switch to require instead:

const Highcharts = require("highcharts");

Highcharts.Pointer.prototype.reset = function () {
  return undefined;
};

Verification #

After making this change, your Webpack bundle should properly extend the Pointer prototype without errors, while keeping all other Highcharts functionality intact. This aligns with how Webpack resolves ES modules and avoids relying on the global variable structure that works outside of bundlers.

内容的提问来源于stack exchange，提问作者Jhonny007