Incompatibility with Vitejs

[Digital-Coder]

Describe the bug
Hi @stepankuzmin! I have been migrating open source [email protected] application to Vitejs, but this package has some problems. By adding @urbica/react-map-gl , in the browser console I get errors like : global is not defined and if I find hacky way to add global then I get error that require is not defined. I think this package is not compatible with [email protected] (webpack 5) too because it does not ship with nodejs polyfills anymore.

It seems that these issues are caused by isBrowser function and require() commonJs import here src/utils/mapbox-gl.js and one of the users has responded by potential fix here : #330.
I would really appreciate if you could look into this,

To Reproduce
You could check this playground here with Vite
npm run dev in the terminal
and open browser console

or
npm create vite@latest
npm i mapbox-gl @urbica/react-map-gl
add map to the app.jsx
check browser console

Expected behavior
Compatability with webpack v4,v5, and Vite which uses rollup bundler

[Digital-Coder]

maybe these issues are related too #314 #307 ?

[stepankuzmin]

Hey @Digital-Coder 👋

Thanks for sharing, this may be related

[Digital-Coder]

@stepankuzmin I forgot to update ! I was able to make it work for vitejs by changing src/utils/mapbox-gl.js to something like this:

import map from 'mapbox-gl';

const isBrowser =
  typeof window !== 'undefined' && typeof window.document !== 'undefined';

let mapboxgl = null;
mapboxgl = isBrowser ? (mapboxgl = map) : null;
export default mapboxgl;

For [email protected] I had to add /* eslint-disable */ to react-map-gl.esm.js file and change browser list in package.json to this for proper transpilation. https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

"browserslist": {
   "production": [
    "defaults",
     "not ie 11"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 }

I am not opening PR because I saw in your codebase you are using types so this solution might need some tweaks, but hopefully its very helpful

[stepankuzmin]

Hi @Digital-Coder 👋

This should work now with the latest release v1.16.1

[Digital-Coder]

Hi @Digital-Coder 👋

This should work now with the latest release v1.16.1

seems to be working, thank you !