mapbox / mapbox/mapbox-gl-js

Calling setStyle with a style url throws TypeError: Cannot read property 'send' of undefined

Open
#6,954 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**mapbox-gl-js version**:
0.45.0

**browser**:
Chrome

I really like the `setStyle` and `diffStyles` approach for React + MapboxGL integration outlined in [this article](https://hackernoon.com/react-redux-with-mapbox-78fa3767211e), but I am noticing a possible bug when calling `map.setStyle` with default mapbox style urls.

### Steps to Trigger Behavior

1. Instantiate a map using a default `mapbox://` style url
2. Wait for the `style.load` event, then call `setStyle` with a new style url
3. Repeat Step 2 quickly.

Following these steps slowly (see gif) works fine, but going quickly causes an error to throw:
```
TypeError: Cannot read property 'send' of undefined
e.P.send https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:32:15431
i.loadTile https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:32:21086
i._loadTile https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:32:55673
i._addTile https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:32:62499
i._updateRetainedTiles https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:32:61509
i.update https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:32:60859
i.eval https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:32:54448
i.D.fire https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:28:8423
i.D.fire https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:28:8742
eval https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:32:19998
o https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:32:15051
XMLHttpRequest.r.onload https://qx91nqjlyj.codesandbox.io/node_modules/mapbox-gl/dist/mapbox-gl.js:28:251128
```

### Link to Demonstration

In this demo, I disable the buttons which trigger calls to `map.setStyle` until the `style.load` event fires.

https://codesandbox.io/s/qx91nqjlyj

![setstyledemo](https://user-images.githubusercontent.com/4524175/42605245-c29d5f32-852b-11e8-99e2-f09a6236e01b.gif)

### Expected Behavior

Calling `map.setStyle` should not throw an error if it is done after the `style.load` event fires.

### Actual Behavior

An error gets thrown by calls to `map.setStyle` even after waiting for `style.load` to fire first.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox and reproduce rapid map.setStyle calls after style.load fires. Trace the setStyle path to the failing send call and determine why it becomes undefined during repeated style changes. Done means repeated style URL changes no longer throw the reported TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.