react-highcharts: Cannot set property 'HighchartsAdapter' of undefined

Question

Stuck with line:

global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');

Without it, get error

Uncaught TypeError: Cannot set property 'HighchartsAdapter' of undefined

With it, obviously get

Cannot find module 'exports?HighchartsAdapter!highcharts-standalone-adapter'

So, the real question is how to include HighchartsAdapter.

Where is the full code to this strange example? `global` is a node thing, `window` is being assigned to it on the client which you are not doing hence the error (e.g. `window.global = window`). The require is using some special keyword too. Need the full source. — Dominic, Oct 29 '15 at 15:35
Source code for this example https://github.com/kirjs/react-highcharts/blob/master/demo/src/index.jsx . Looks like it should be bundled using webpack, which I didn't touch before. I am trying to run it using npm. — vl.lapikov, Oct 29 '15 at 15:51
Yep you can see in that webpack config in demo there that highcharts-standalone-adapter is an alias for "highcharts-standalone-adapter" : "highcharts-release/adapters/standalone-framework.src.js" — Dominic, Oct 29 '15 at 15:59
Looks like `exports?` is a webpack convention to add something to the global object https://github.com/webpack/docs/wiki/shimming-modules#exporting. Perhaps webpack also handles the `global` var. You'll have to bundle your app using webpack with the same config (excluding the other demos) to get this closer to (or working) — Dominic, Oct 29 '15 at 16:01

score 0 · Answer 1 · answered Oct 29 '15 at 16:42

The original example should be bundled using webpack. Then I suppose it works fine.

If you want to use Browserify, then instead of using:

global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');
var Highcharts = require("highcharts");

use next:

var Highcharts = require('highcharts-browserify');

1 Answers1