Does Bubble cache html elements or something?

[clark]

I’m adding a Mapbox map to a project, and it works on the first load, but if I reload the page I get an error from the console saying “SyntaxError: Identifier ‘map’ has already been declared” when it definitely hasn’t.

The weird thing is if I tweak the code in the HTML element, it works again on first load and then throws the same error if I reload the page.

If someone could explain why this is happening, that’d be awesome.

So does Bubble cache the html element or something? That’s the only thing I can think of as to why it would only throw that error when the page is reloaded.

Here’s my map box snippet if it helps:

In the HTML Header:

In the HTML Element:

// TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'redacted'; const map = new mapboxgl.Map({ container: 'map', // container ID center: [-120.35, 50.675], // starting position [lng, lat] zoom: 12, // starting zoom });

map.on('style.load', () => {
    map.resize();
	map.setConfigProperty('basemap', 'lightPreset', 'dusk');
});

[dorilama]

generally speaking the html element is not html coming from the server, it’s an element that injects a string as html in its container. It can do that multiple times, for example when dynamic data changes.
The problem is that your script is executed multiple times.
You want your script to be wrapped in a function to be sure that variables are locally scoped. Try putting your code in a immediate invoked function like this: (()=>{/* your code here */})()

[clark]

This worked! Thanks for the explanation and solution, @dorilama