How to configure babel presets (and/or exclude files from transpilation) -- Mapbox GL, ReactMapGL - Blank Map

[JamesRexMiller4]

Hello,

Apologies in advance for not having a reproducible example. I tried creating a codesandbox but not sure that it was actually running vite.

My issue I am experiencing is converting a create-react-app project to use vite, and in the process one of my other dependencies, mapbox-gl-js has become broken. The issue is not necessarily vite specific, but is documented here - mapbox/mapbox-gl-js#10565
And solutions for the issue are mentioned directly in the documentation - https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

Previously, my solution in create-react-app land was to reassign the WebWorker to a non-transpiled version. But this seems to be an option only available to WebPack from what I can see. I then tried to go down the route of adding the @babel/preset-env and browserlist per the Mapbox documentation. But I must not have been configuring it properly because as soon as I tried to do that then the whole application ceased to render and an error of "require" is not defined appeared on line 1 of my index.js despite not having a require syntax there (instead was import React from "react").

Fairly confident I know what the issue is, based on my prior encounters with it, but not confident what would be the optimal solution while working with Vite and the vite-plugin-react. Sounds like by adding babel into the mix I lose a lot of the speed gained by ESModules. Any advice or guidance would be greatly appreciated, and if code samples would be helpful I can try and provide those.

Thanks!

[ArnaudBarre]

Hi,

Do you have any particular browser support requirement?

This is the default support in Vite: https://vitejs.dev/guide/build.html#browser-compatibility

For most modern project you don't need to configure anything related to transpilation. If the lib doens't work with Vite, you should instead look at the lib setup, not the transpilation setup. Try to start from on a fresh tempalate on vite.new/react-ts and add reproduce the blank map issue.

You can look into the GH issues of the lib too, you're probably not the first one to use it with Vite.

[JamesRexMiller4]

Hey,

Thanks for the info, I will try and dig into the lib setup. Maybe falsely assumed that since I was getting the same symptom it was the same issue. I do not have any particular browser requirements, just suggest using latest versions of Chrome for performance.

I did try your suggestion in starting from a fresh setup in a code sandbox and did not experience the problem but wasn’t entirely sure if I had configured the sandbox environment properly for vite. Will try just doing it on my machine and see what comes up.

If I find anything else, I’ll reply back with what I find. Appreciate the help!