[Bug] Possible regression in v8.0.2 — Layers and sources not rendering consistently

[MartinSandstrom]

Description

Hi there,

Thank you for maintaining this great library :)

After upgrading from react-map-gl@8.0.1 to 8.0.2, we’ve noticed some unexpected behavior: Certain sources and layers are not rendering reliably. In some cases, layers don’t appear, and toggling visibility on one layer can cause others (previously missing) to appear.

So far, the behavior seems inconsistent and difficult to pin down. We’ve reviewed the patch notes and commits but haven’t found any obvious changes that would explain this issue. We've also tried reproducing the problem in a minimal sandbox environment, but haven’t had any luck, possibly because we’re not yet sure what specifically is triggering it.

We have tried to lo the layers that exist in the map with map?.getStyle()?.layers; and the number of layers is different for more or less each render.

What we’ve observed:

• Some layers fail to render initially
• Toggling one layer may cause others to appear or disappear (different renders have different layers)
• Reverting to 8.0.1 restores the expected behavior

Do you have any clue as to what might be causing this behavior in the latest release?

Expected Behavior

The layers should be rendered at all times and stay consistent between re-renders.

Steps to Reproduce

At the point of writing the only way I have found to reproduce this is to upgrade the version in one of our private repositories. Sorry for this.

Environment

• Framework version: 8.0.2
• Map library: 3.9.4
• Browser: Chrome
• OS: macOS

Logs

No response

[marcus-pervanovo]

Thanks! I just had a similar issue (one layer did not render initially, unless the map was zoomed out below level 6).
Downgrading to v8.0.1 solved the issue.

[Pessimistress]

Should be fixed by 8.0.3

[MartinSandstrom]

Thank you for the swift response @Pessimistress. ❤

We are still seeing issues on v8.0.3. The previous issues are better, but we now have heaps of errors like the one below when we switch between layers.

Error: Layer with id "01952245-fea6-7308-b208-98fc12d21ecf" does not exist on this map.
    at To.moveLayer (style.ts:2597:42)
    at Map.moveLayer (map.ts:3239:20)
    at updateLayer (layer.ts:32:9)
    at Layer (layer.ts:113:7)
    at react-stack-bottom-frame (react-dom-client.development.js:23949:20)
    at renderWithHooks (react-dom-client.development.js:5078:22)
    at updateFunctionComponent (react-dom-client.development.js:8327:19)
    at beginWork (react-dom-client.development.js:9944:18)
    at runWithFiberInDEV (react-dom-client.development.js:1510:30)
    at performUnitOfWork (react-dom-client.development.js:15119:22)
    at workLoopSync (react-dom-client.development.js:14943:41)
    at renderRootSync (react-dom-client.development.js:14923:11)
    at performWorkOnRoot (react-dom-client.development.js:14410:13)
    at performWorkOnRootViaSchedulerTask (react-dom-client.development.js:16274:7)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:45:48)

Downgrading to v8.0.1 resolved the errors. Do you want me to create a separate issue or should we continue the conversation in this thread?

[Pessimistress]

@MartinSandstrom is the layer id from another layer created by you?

I'd greatly appreciate if you could describe your use case in details.

[MartinSandstrom]

Yes, the ID is from our system. The user can navigate backward and forward in time, and each day corresponds to a specific layer with a unique ID, like the one mentioned above. Each time the user changes the day, we render another raster. The errors are inconsistent with the time changes, sometimes there is no error, and sometimes there are multiple.

In one of our other applications, we’ve seen related errors being logged, such as:
Error: Layer with id "0193f7f9-c327-7eb3-8412-526ffb44624c" does not exist on this map.

And sometimes also:
Error: Source "jsx-source-58" cannot be removed while layer "0193f7f9-c327-7eb3-8412-526ffb44624c" is using it.

I can try to reproduce the errors in a sandbox environment in the coming days.

[MartinSandstrom]

I could not manage to reproduce the error but our code looks something like this. I used the example code from this repo react-map-gl/examples/mapbox/geojson/src/app.tsx and this is a replacement of the app.tsx file, to exemplify.

import * as React from 'react';
import {useState} from 'react';
import {createRoot} from 'react-dom/client';
import Map, {Layer, Source} from 'react-map-gl/mapbox';
import ControlPanel from './control-panel';

const MAPBOX_TOKEN = ''; // Set your mapbox token here

const ALL_RASTER_LAYERS = [
  {
    id: '1',
    urlPathTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
  },
  {
    id: '2',
    urlPathTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
  },
  {
    id: '3',
    urlPathTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
  },
  {
    id: '4',
    urlPathTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
  },
  {
    id: '5',
    urlPathTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
  }
];

const RasterComponent = ({layers}: {layers?: {id: string; urlPathTemplate: string}[]}) => {
  return (
    <div>
      {layers.map((layer, index) => {
        const previous = ALL_RASTER_LAYERS[index - 1];
        const beforeLayer = previous ? previous.id : 'tunnel-path';
        return (
          <Source
            type="raster"
            id={layer.id}
            key={layer.id}
            tiles={[layer.urlPathTemplate]}
            tileSize={256}
            minzoom={6}
            maxzoom={22}
          >
            <Layer beforeId={beforeLayer} id={layer.id} type="raster" paint={{}} />
          </Source>
        );
      })}
    </div>
  );
};

export default function App() {
  const [year, setYear] = useState(2015);

  return (
    <>
      <Map
        initialViewState={{
          latitude: 40,
          longitude: -100,
          zoom: 3
        }}
        mapStyle="mapbox://styles/mapbox/light-v9"
        mapboxAccessToken={MAPBOX_TOKEN}
        interactiveLayerIds={['data']}
      >
        <RasterComponent layers={ALL_RASTER_LAYERS} />
      </Map>

      <ControlPanel year={year} onChange={value => setYear(value)} />
    </>
  );
}

export function renderToDom(container) {
  createRoot(container).render(<App />);
}

[MartinSandstrom]

Maybe this is Friday brain doing some big blunder (actually quite likely), but...

When I installed 8.0.3 in the example repo mentioned above, I realized that the 8.0.3 version was in the package.json, but I got the old code, before the changes in 0.2 and 0.3.

[Pessimistress]

@MartinSandstrom The changes are only made to the /mapbox endpoint, not /mapbox-legacy.

[MartinSandstrom]

@MartinSandstrom The changes are only made to the /mapbox endpoint, not /mapbox-legacy.

Ah, that makes sense, thanks for clarifying! 💡

[MartinSandstrom]

Thanks again for pointing me to the correct code @Pessimistress . I fiddled around with the latest changes, and if I change createSource back to:

function createSource(map, id, props) {
    if (map.style && map.style._loaded) {
        const options = { ...props };
        delete options.id;
        delete options.children;
        // @ts-ignore
        map.addSource(id, options);
        return map.getSource(id);
    }
    return null;
}

The errors go away.

[MartinSandstrom]

It seems like isStyleLoaded() doesn't just report the initial loading state, it dynamically changes throughout the lifecycle of the map. When new sources are added, isStyleLoaded() returns false as the map processes these changes, even if it previously returned true. On the contrary of map.style && map.style._loaded which does an initial check and stays true for subsequent updates.

Could there be downstream code that still tries to reference the source, expecting them to exist?

[narghev]

Hi @MartinSandstrom , have you found a temporary solution that I can use until #2526 gets merged? I'm facing an issue of the geojson layer not rendering on the first Map render, but after forced updates or a browser hot-reload the layer shows up.