visgl
[Bug] MapID giving "ByteString should be constructed with non-empty values"
Description
I have recently switched from CRA to Vite and upgraded visgl and typescript.
"dependencies": {
"@vis.gl/react-google-maps": "^1.5.1",
"@vitejs/plugin-react": "^4.4.1",
"vite": "^6.3.3"
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^8.31.1",
"@typescript-eslint/parser": "^8.31.1",
"typescript": "^5.8.3",
}
Currently when I comment out the mapID it gives "The map is initialized without a valid Map ID, which will prevent use of Advanced Markers.", but when I use the mapId I receive: main.js:273 Uncaught (in promise) Error: ByteString should be constructed with non-empty values at new _.Ub (main.js:273:744) at o8a (webgl.js:61:148) in the console. Seems to be an error passed from the Google Maps API library. Definitely using a valid mapID as verified by my GCP account.
<APIProvider apiKey={import.meta.env.VITE_GOOGLE_API_KEY} libraries={["marker"]}>
{/* <MapContent data={data} theme={theme} /> */}
<Map
key={`${currentMapId}-${zoomKey}`}
mapId={currentMapId}
style={{ width: "100%", height: "100%" }}
defaultCenter={{ lat: INITIAL_VIEW_STATE.latitude, lng: INITIAL_VIEW_STATE.longitude }}
defaultZoom={INITIAL_VIEW_STATE.zoom}
gestureHandling={"greedy"}
onClick={() => setActiveMarkerId(null)}
>
<MapControls
visibilitySettings={visibilitySettings}
onVisibilityChange={handleVisibilityChange}
points={visiblePoints}
padding={MAP_CONSTANTS.DEFAULT_PADDING}
/>
{/* Render map points with pre-calculated offset positions and visibility control */}
{displayPoints.map((point, index) => {
// Ensure we always have valid coordinates for latitude and longitude
const displayLatitude = typeof point.adjustedLatitude === "number" ? point.adjustedLatitude : point.latitude;
const displayLongitude = typeof point.adjustedLongitude === "number" ? point.adjustedLongitude : point.longitude;
return (
<MapMarker
key={`map-marker-${index}`}
point={{
...point,
latitude: displayLatitude,
longitude: displayLongitude,
}}
id={`point-${index}`}
activeMarkerId={activeMarkerId}
setActiveMarkerId={setActiveMarkerId}
visibilitySettings={visibilitySettings}
/>
);
})}
</Map>
</APIProvider>
This was showing the map before with CRA but now fails with vite switch.
Steps to Reproduce
Install versions:
"dependencies": {
"@vis.gl/react-google-maps": "^1.5.1",
"@vitejs/plugin-react": "^4.4.1",
"vite": "^6.3.3"
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
}
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^8.31.1",
"@typescript-eslint/parser": "^8.31.1",
"typescript": "^5.8.3",
}
vite.config.tsx:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import eslint from "vite-plugin-eslint";
export default defineConfig({
optimizeDeps: {
include: [
"@deck.gl/core",
"@deck.gl/layers",
"@deck.gl/react",
"@deck.gl/extensions",
"@deck.gl/geo-layers",
"@deck.gl/google-maps",
"@deck.gl/mesh-layers",
"@luma.gl/constants",
],
},
plugins: [react(), eslint()],
base: "/",
define: {
global: "globalThis", // This line fixes `global` references
},
server: {
port: 3000,
open: true,
},
});
yarn start
Environment
- Google maps version: weekly
- Browser and Version: Microsoft Edge Version 136.0.3240.64 (Official build) (64-bit)
- OS: Windows 11
Logs
Uncaught (in promise) Error: ByteString should be constructed with non-empty values
at new _.Ub (js?callback=__googleMapsApiOnLoadCallback&key=***REDACTED**&libraries=places:1776:744)
at o8a (webgl.js:61:148)
Network Logs
https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i59911&2i39245&2e1&3u8&4m2&1u654&2u400&5m5&1e0&5sen-US&6sus&10b1&12b1&7s73128fc4d9f16e4a&8e1&key=**REDACTED**&token=120523 returns 200 OK and first initial render for map.
Our team has also started running into this issue recently. Our custom map styles were working fine using the mapId and without changing anything on our end the map just started disappearing one day a couple weeks ago and we started seeing the same console error that was mentioned above. We had to bail on the mapId attribute to get our maps to show back up in our app.
This issue is encountered on our team as well. Everything was working fine, we haven't updated the library. Our client noticed a week ago map loads were failing and this showing in the error console. I'm using mapId. I'm reading above that removing mapId will get this to work so I'm going to replace my advanced markers and removing mapId in order to restore map functionality.
Our team has also started running into this issue recently. Our custom map styles were working fine using the mapId and without changing anything on our end the map. Anyone knows what happened?
Our team has also started running into this issue recently. Our custom map styles were working fine using the mapId and without changing anything on our end the map just started disappearing one day a couple weeks ago and we started seeing the same console error that was mentioned above. We had to bail on the mapId attribute to get our maps to show back up in our app.
It seems like the old mapId is not valid. I change my mapId and work.
Our team has also started running into this issue recently. Our custom map styles were working fine using the mapId and without changing anything on our end the map just started disappearing one day a couple weeks ago and we started seeing the same console error that was mentioned above. We had to bail on the mapId attribute to get our maps to show back up in our app.
It seems like the old mapId is not valid. I change my mapId and work.
We have tried creating some new mapIds and haven't had any luck with doing that so far.
That error-message sounds like something from the closure library which is probably being used by the maps API internally. This would indicate some sort of problem involving the map-styling or loading of the styles in the Maps API.
Can you check if the error also occurs without using react and maybe share the mapIds involved so I can try to reproduce?
That error-message sounds like something from the closure library which is probably being used by the maps API internally. This would indicate some sort of problem involving the map-styling or loading of the styles in the Maps API.
Can you check if the error also occurs without using react and maybe share the mapIds involved so I can try to reproduce?
Absolutely. This error code is shown in the picture below.
In fact, we try to lock the google map to low version, as default version is 'weekly', which means using the v3.60.12 now, we change version to v3.59, it also works. I can not debug the internal code since the google map is not open source. For the mapId, it belongs to my company, so I can not share with you. Do you have any other idea?
The map Id is completely unproblematic to be shared – it isn't connected to any cost, and doesn't contain any sensitive information. It just happens to be tied to your project, but as far as I know there isn't even a way to find out anything about the project by looking at the mapId.
Also, did you check to see if the problem also happens using a vanilla map without react or any libraries?
My map ID is "73128fc4d9f16e4a".
Can you check if the error also occurs without using react and maybe share the mapIds involved so I can try to reproduce?
I have not experimented without React yet.
Also, did you check to see if the problem also happens using a vanilla map without react or any libraries?
No, I have not yet I will try both of these next
Curious if anyone has made any progress here? We are still not able to use any custom map styling by mapId.
I'm almost sure that this problem is unrelated to this library.
If you are still experiencing these problems, please create a bug-report in the google issue-tracker (https://issuetracker.google.com/issues/new?component=188853&template=788207) and post a link to it here.
I've successfully replicated the issue in a small test project. It seems like some package version incompatibility. I will also go about sending this to the Google team. I think the issue on my end was to do with the react-app-polyfill/stable package. After removing import "react-app-polyfill/stable"; from my index.tsx file seemed to solve the issue.
@Dean-Overton Thanks for that! Do you have your test-project with the error visible or available somewhere?
Question to everyone else, are you using a create-react-app template or the react-app-polyfil?
@Dean-Overton Holy smokes nice find!! Yes I have the same polyfill package in my index.tsx as well. If I uncomment out that package my mapId styling works as expected!