How to import FlexmonsterHighcharts from react-flexmonster

Vera,
Thanks for your answer but unfortunately I'm running into the same issue I've had before. If I don't include flexmonster.highcharts.js, at least my flexmonster works.
But If I add it, there are two javascript errors and things don't work anymore. I've tried adding the script to the container window, I tried to import it into my react package. Regardless of the method, there are crashes and it doesn't work.
ScreenHunter 2161.png -> shows the maximum call stack size exceeded error. 
ScreenHunter 2162.png -> I tried to unminify the file so I could give you the exact line but it's not clear. Maybe you can read it.

                    f.hsa = function (c, a) {
                        if (a) {
                            "string" == typeof a && (a = f.Dl(a));
                            var b = a;
                            c != f.RK &&
                                c != f.uq &&
                                c != f.Pj &&
                                c != f.NK &&
                                (b = function () {
                                    for (var d = [], g = 0; g < arguments.length; g++) d[g] = arguments[g];
                                    e.rd(function () {
                                        a.apply(null, d);
                                    }, 1);
                                });
                            f.P().addEventListener(c, b);
                        }
                    };

Problem happens in  a.apply(null, d); line.
I've tried to ignore this and still called FlexmonsterHighcharts.getData and I got the following exception.

this.instance.getData({
				slice: slice
			}, function(data) { 
				if (_prepareDataFunction != undefined) {
					callbackHandler(_prepareDataFunction(data, _options), data);
				} else {
					_options.withDrilldown = options.withDrilldown && data.meta["rAmount"] > 0 && data.meta["cAmount"] > 0; //not enough data
					callbackHandler(prepareData(data, _options), data);
				}
			}, _updateHandler
		);

Uncaught TypeError: Cannot read property 'getData' of undefined
this.instance is null.
 
It's clear that I am not able to make each other aware of themselves.

FlexmonsterReact.highcharts isn't available and FlexmonsterHighcharts doesn't have a reference to this.instance which I assume should be FlexmonsterReact instance.

 
I'm stuck and can't really bring them together in React. Isn't there some sort of a configuration to enable this at the package level so we don't mix and match?
If it's necessary I can give you a code snippet even though I think the problem is with the way highcharts-flexmonster library is imported. 
Looking forward to your answer.
 
 

Vera,
Thanks for the reply. I was finally able to call getData method.
But I'm still experiencing the other issue I mentioned. However, I don't think it's necessarily related to your library.
We're utilizing mobx observables and the assignment below fails with the "Uncaught RangeError: Maximum call stack size exceeded" error

this.props.store.flexmonster = this.flexmonsterRef.current.flexmonster;

 
If I assign it to a regular(not observable) variable, this exception doesn't occur.
If I don't add flexmonster.highcharts.js, assignment doesn't fail either. This assignment works if I remove the highcharts script.
 
So I believe this is a combination of mobx observable and flexmonster.highcharts.
 
I'm not sure if you can test such a scenario locally. If you can, I'd be glad to hear your findings.
 
If not, is it possible for me to receive the unminified version of flexmonster.full.js 2.8.7 version?
 
That way I can debug and understand why it fails.
 

            e.rd = function (f, c) {
                f = setTimeout(f, c); --This is Where the infinite loop seems to be triggered
                k.FD.push(f);
                return f;
            };

As you can see my unminified version doesn't really tell me what's going on.
 
Any input will be appreciated.
 
Thanks,
Yusuf

Hi Vera,
I was able to fix the issue on our side by changing the variable to be observable.ref and not an observable.
 
This was due to a logical operation below:
this.flexmonsterRef.current.flexmonster.highcharts.instance === this.flexmonsterRef.current.flexmonster
Observable tried to decorate everything as observable and got into this infinite loop. This explains why we only saw it when highcharts was enabled.
There's no issue on your side but in case someone else experiences the issue the solution is not to use observable but observable.ref. Let's set it in the record.
 
Thanks,
Yusuf