IBEX Dashboard maps break after successful build

Question

I've setup IBEX dashboard as per instructions at https://github.com/CatalystCode/ibex-dashboard on Windows 10. I made changes in timeline.ts to have more timespan options that works fine.

Problem is after build maps are breaking on mouse over with following error:

react-leaflet-markercluster.min.js:1 Uncaught TypeError: Converting circular structure to JSON
at JSON.stringify (<anonymous>)
at isArraysEqual (react-leaflet-markercluster.min.js:1)
at r.value (react-leaflet-markercluster.min.js:1)
at ReactCompositeComponent.js:610
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:609)
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
at Object.receiveComponent (ReactReconciler.js:124)
at Object.updateChildren (ReactChildReconciler.js:109)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:206)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:310)
at ReactDOMComponent.updateChildren (ReactMultiChild.js:297)
at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:942)
at ReactDOMComponent.updateComponent (ReactDOMComponent.js:760)
at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:722)
at Object.receiveComponent (ReactReconciler.js:124)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:753)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
at Object.receiveComponent (ReactReconciler.js:124)
at Object.updateChildren (ReactChildReconciler.js:109)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:206)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:310)
at ReactDOMComponent.updateChildren (ReactMultiChild.js:297)
at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:942)
at ReactDOMComponent.updateComponent (ReactDOMComponent.js:760)
at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:722)
at Object.receiveComponent (ReactReconciler.js:124)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:753)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
at Object.receiveComponent (ReactReconciler.js:124)
at Object.updateChildren (ReactChildReconciler.js:109)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:206)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:310)
at ReactDOMComponent.updateChildren (ReactMultiChild.js:297)
at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:942)
at ReactDOMComponent.updateComponent (ReactDOMComponent.js:760)
at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:722)
at Object.receiveComponent (ReactReconciler.js:124)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:753)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
at Object.receiveComponent (ReactReconciler.js:124)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:753)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)

If I make the same change in the minified js file then maps work fine, but as you can imagine it won't work long term.

I'm trying to figure out what is different about my setup that is causing the breaking change when I build it.

Mor Shemesh · Answer 1 · 2018-01-09T15:03:23.947

1

I think this might be caused because of the map plugin: https://github.com/YUzhva/react-leaflet-markercluster/issues/55

I got this problem as well, but changing the code to:

./client/src/components/generic/MapData.tsx:

  promise.then(results => {
    // let markupPopup = (popup && L.popup().setContent(popup)) || null;

    if (results.length) {
      markers.push({ position: [ results[0].y, results[0].x] });
    }
  });

edited Jan 09 '18 at 15:03

answered Jan 09 '18 at 14:56

Mor Shemesh

2,689
1
24
36

I made the change and now running into `Unhandled Rejection (Error): Invalid LatLng object: (undefined, undefined) ▶ 43 stack frames were collapsed. (anonymous function) C:/Source/Brightline/Sandbox/IbexDashboard/client/src/components/generic/MapData.tsx:137 134 | a.lng > b.lng ? 1 : 135 | a.lng < b.lng ? -1 : 0); 136 | if (!_.isEqual(oldMarkers, markers)) { > 137 | this.setState({ markers }); 138 | } 139 | }); 140 | }` – Shahid Syed Jan 09 '18 at 19:37
Try this (meaning you leave the lat/lng and remove the popup): markers.push({ lat: results[0].y, lng: results[0].x }); – Mor Shemesh Jan 15 '18 at 12:32

IBEX Dashboard maps break after successful build

1 Answers1