search

unicef / react-webgl-leaflet

12 stars 0 forks source link

TypeError: map is undefined #1

Open vogt31337 opened 4 years ago

vogt31337 commented 4 years ago

Hi,

I just tried this plugin, but it gives me an error (see below). I think I'm using it wrong, but I dont see how or where... Versions used:

"dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "colormap": "^2.3.1",
    "geojson": "^0.5.0",
    "jquery": "^3.4.1",
    "leaflet": "^1.5.1",
    "popper.js": "^1.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-dom": "^16.8.6",
    "react-leaflet": "^2.4.0",
    "react-leaflet-universal": "^2.1.0",
    "react-new-window": "^0.1.1",
    "react-scripts": "3.0.1",
    "react-webgl-leaflet": "^0.0.18",
    "react-websocket": "^2.0.1",
    "recharts": "^1.6.2",
    "sockjs-client": "^1.3.0",
    "typescript": "^3.5.1",
    "websocket": "^1.0.29"
  },

Error:

addTo
E:/mapgui/node_modules/react-webgl-leaflet/build/index.js:50491

  50488 | }, {
  50489 |   key: 'addTo',
  50490 |   value: function addTo(map) {
> 50491 |     map.addLayer(this);
        | ^  50492 |     return this;
  50493 |   } // --------------------------------------------------------------------------------
  50494 | 

createLeafletElement
E:/mapgui/node_modules/react-webgl-leaflet/build/index.js:19029

  19026 | 
  19027 | var cl = _leaflet2.default.canvasLayer();
  19028 | 
> 19029 | var glLayer = cl.delegate(this).addTo(leafletMap);
        | ^  19030 | var canvas = glLayer._canvas;
  19031 | var gl = canvas.getContext('experimental-webgl', {
  19032 |   antialias: true

componentWillMount
E:/mapgui/node_modules/react-webgl-leaflet/build/index.js:13976

  13973 | MapLayer.prototype.componentWillMount = function componentWillMount() {
  13974 |   _MapComponent.prototype.componentWillMount.call(this);
  13975 | 
> 13976 |   this.leafletElement = this.createLeafletElement(this.props);
        | ^  13977 | };
  13978 | 
  13979 | MapLayer.prototype.componentDidMount = function componentDidMount() {

callComponentWillMount
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:14323

  14320 | var oldState = instance.state;
  14321 | 
  14322 | if (typeof instance.componentWillMount === 'function') {
> 14323 |   instance.componentWillMount();
        | ^  14324 | }
  14325 | 
  14326 | if (typeof instance.UNSAFE_componentWillMount === 'function') {

mountClassInstance
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:14422

  14419 | 
  14420 | 
  14421 | if (typeof ctor.getDerivedStateFromProps !== 'function' && typeof instance.getSnapshotBeforeUpdate !== 'function' && (typeof instance.UNSAFE_componentWillMount === 'function' || typeof instance.componentWillMount === 'function')) {
> 14422 |   callComponentWillMount(workInProgress, instance); // If we had additional state updates during this life-cycle, let's
        | ^  14423 |   // process them now.
  14424 | 
  14425 |   updateQueue = workInProgress.updateQueue;

updateClassComponent
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:18407

  18404 | 
  18405 | 
  18406 |   constructClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
> 18407 |   mountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
        | ^  18408 |   shouldUpdate = true;
  18409 | } else if (current$$1 === null) {
  18410 |   // In a resume, we'll already have an instance we can reuse.

beginWork$1
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:20145

  20142 | 
  20143 |     var _resolvedProps = workInProgress.elementType === _Component2 ? _unresolvedProps : resolveDefaultProps(_Component2, _unresolvedProps);
  20144 | 
> 20145 |     return updateClassComponent(current$$1, workInProgress, _Component2, _resolvedProps, renderExpirationTime);
        | ^  20146 |   }
  20147 | 
  20148 | case HostRoot:

callCallback
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:337

  334 |     window.event = windowEvent;
  335 |   }
  336 | 
> 337 |   func.apply(context, funcArgs);
      | ^  338 |   didError = false;
  339 | } // Create a global error event handler. We use this to capture the value
  340 | // that was thrown. It's possible that this error handler will fire more

invokeGuardedCallbackDev
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:386

  383 | // errors, it will trigger our global error handler.
  384 | 
  385 | evt.initEvent(evtType, false, false);
> 386 | fakeNode.dispatchEvent(evt);
      | ^  387 | 
  388 | if (windowEventDescriptor) {
  389 |   Object.defineProperty(window, 'event', windowEventDescriptor);

invokeGuardedCallback
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:439

  436 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
  437 |   hasError = false;
  438 |   caughtError = null;
> 439 |   invokeGuardedCallbackImpl$1.apply(reporter, arguments);
      | ^  440 | }
  441 | /**
  442 |  * Same as invokeGuardedCallback, but instead of returning an error, it stores

beginWork$$1
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:25723

  25720 | } // Run beginWork again.
  25721 | 
  25722 | 
> 25723 | invokeGuardedCallback(null, beginWork$1, null, current$$1, unitOfWork, expirationTime);
        | ^  25724 | 
  25725 | if (hasCaughtError()) {
  25726 |   var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.

performUnitOfWork
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:24649

  24646 |   next = beginWork$$1(current$$1, unitOfWork, renderExpirationTime);
  24647 |   stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
  24648 | } else {
> 24649 |   next = beginWork$$1(current$$1, unitOfWork, renderExpirationTime);
        | ^  24650 | }
  24651 | 
  24652 | resetCurrentFiber();

workLoopSync
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:24622

  24619 | function workLoopSync() {
  24620 |   // Already timed out, so perform work without checking if we need to yield.
  24621 |   while (workInProgress !== null) {
> 24622 |     workInProgress = performUnitOfWork(workInProgress);
        | ^  24623 |   }
  24624 | }
  24625 | /** @noinline */

performSyncWorkOnRoot
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:24211

  24208 | 
  24209 | do {
  24210 |   try {
> 24211 |     workLoopSync();
        | ^  24212 |     break;
  24213 |   } catch (thrownValue) {
  24214 |     handleError(root, thrownValue);

flushSyncCallbackQueueImpl/<
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:12263

  12260 |     var callback = queue[i];
  12261 | 
  12262 |     do {
> 12263 |       callback = callback(_isSync);
        | ^  12264 |     } while (callback !== null);
  12265 |   }
  12266 | });

unstable_runWithPriority
E:/mapgui/node_modules/scheduler/cjs/scheduler.development.js:821

  818 | currentPriorityLevel = priorityLevel;
  819 | 
  820 | try {
> 821 |   return eventHandler();
      | ^  822 | } finally {
  823 |   currentPriorityLevel = previousPriorityLevel;
  824 | }

runWithPriority$2
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:12209

  12206 | 
  12207 | function runWithPriority$2(reactPriorityLevel, fn) {
  12208 |   var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
> 12209 |   return Scheduler_runWithPriority(priorityLevel, fn);
        | ^  12210 | }
  12211 | 
  12212 | function scheduleCallback(reactPriorityLevel, callback, options) {

flushSyncCallbackQueueImpl
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:12258

  12255 | try {
  12256 |   var _isSync = true;
  12257 |   var queue = syncQueue;
> 12258 |   runWithPriority$2(ImmediatePriority, function () {
        | ^  12259 |     for (; i < queue.length; i++) {
  12260 |       var callback = queue[i];
  12261 | 

flushSyncCallbackQueue
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:12246

  12243 |     Scheduler_cancelCallback(node);
  12244 |   }
  12245 | 
> 12246 |   flushSyncCallbackQueueImpl();
        | ^  12247 | }
  12248 | 
  12249 | function flushSyncCallbackQueueImpl() {

scheduleUpdateOnFiber
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:23649

  23646 |       // scheduleCallbackForFiber to preserve the ability to schedule a callback
  23647 |       // without immediately flushing it. We only do this for user-initiated
  23648 |       // updates, to preserve historical behavior of sync mode.
> 23649 |       flushSyncCallbackQueue();
        | ^  23650 |     }
  23651 |   }
  23652 | } else {

enqueueSetState
E:/mapgui/node_modules/react-dom/cjs/react-dom.development.js:14056

  14053 |   }
  14054 | 
  14055 |   enqueueUpdate(fiber, update);
> 14056 |   scheduleWork(fiber, expirationTime);
        | ^  14057 | },
  14058 | enqueueReplaceState: function (inst, payload, callback) {
  14059 |   var fiber = get(inst);

./node_modules/react/cjs/react.development.js/Component.prototype.setState
E:/mapgui/node_modules/react/cjs/react.development.js:315

  312 |     }
  313 |   }
  314 | 
> 315 |   this.updater.enqueueSetState(this, partialState, callback, 'setState');
      | ^  316 | };
  317 | /**
  318 |  * Forces an update. This should only be invoked when it is known with

updateGridData
E:/mapgui/src/App.js:122

  119 |            i++;
  120 |        }
  121 | 
> 122 |        this.setState({
      | ^  123 |            grid, bus, res_bus, res_line, line, isLoading: false
  124 |        })
  125 |    }

componentDidMount/<
E:/mapgui/src/App.js:131

  128 | // REST variant.
  129 | axios.get("http://localhost:34119/grid")
  130 |     .then(resp => {
> 131 |         this.updateGridData(resp.data._object)
      | ^  132 |     }).catch(error => {
  133 |         console.log(error)
  134 |         this.setState({ isLoading: false })
jfaraklit commented 4 years ago

Any luck with this error? I see the same. @vogt31337