React-map-gl: Create example that bundles react-map-gl using webpack

[ibgreen]

react-map-gl is only tested using browserify, and unfortunately it appears to be non trivial getting react-map-gl and mapbox-gl-js working with webpack.

While we are not ready to commit to formal support for webpack, it would be great to have an example that could serve as a starting point for webpack users.

[owap]

FYI, Mapbox has posted their official Webpack config that contains all the loaders needed to get Mapbox GL JS working in Webpack:

https://github.com/mapbox/mapbox-gl-js/blob/master/webpack.config.example.js

I was getting errors on the page before adjusting my config to match theirs. No errors anymore, but also no tiles. Going to see if setting my access_token makes a difference 😉

[ibgreen]

@owap - Awesome, I have added this info to the README file.

[mvaivre]

So yeah, MapBox officially ditched the webpack support: https://github.com/mapbox/mapbox-gl-js/pull/3235

Now, we are supposed to require directly the .js file: https://github.com/mapbox/mapbox-gl-js#using-mapbox-gl-js-with-other-module-systems

What would be the best solution to integrate react-map-gl now?

[contra]

I think the solution is to have react-map-gl import mapbox-gl/dist/mapbox-gl instead of mapbox-gl - I'll test it on a fork and send a PR if it works out.

[cammanderson]

Hi @contra,
I've had a play and there are some issues. You'll need two aliases for the geo/transform source. There are bigger issues though, moving from 0.25.0 webpack/mapbox uses dist which could create version mismatch issues

[contra]

Alright, definitive answer -

Method 1: You can still use the old way! Update webworkify-webpack once https://github.com/borisirota/webworkify-webpack/pull/21 is published and your existing stuff should work fine.

Method 2: Alternatively, you can remove all of the old hacks (webworkify, glsl compile, etc.) and set up an alias which should work in most cases:

resolve: {
  alias: {
    'mapbox-gl/js/mapbox-gl.js': 'mapbox-gl/dist/mapbox-gl.js'
  }
}

[davidhampgonsalves]

Has anyone gotten @contra 's aliasing method working(I tried and failed with 1.7)? Transforming brfs and webworkerify-webpack would still be required correct?,are there specific dependency versions as well?

[contra]

@davidhampgonsalves Aliasing (method 2) should work fine with no other hacks. Method 1 w/ webworkify-webpack and the brfs hacks is the same as the old instructions, but you have to use my fork of webworkify-webpack for it to work until they merge my PR.

[davidhampgonsalves]

Thanks @contra. I couldn't get that working but was able to with

alias: {
  'mapbox-gl/js/geo/transform': path.join(__dirname, "mapbox-gl/js/geo/transform"),
  'mapbox-gl': path.join(__dirname, "mapbox-gl/dist/mapbox-gl.js")
}

I added the transform alias to handle https://github.com/uber/react-map-gl/blob/master/src/utils/transform.js#L23

[gaving]

my head is spinning with this stuff, I've tried aliasing the above to get react-map-gl going with webpack, but all I'm getting is:-

 index.js:9 Uncaught TypeError: Cannot convert undefined or null to object

From webpack:///./~/mapbox-gl/~/webworkify/index.js?. My hunting has then led me to https://github.com/borisirota/webworkify-webpack/issues/18 (where the author has posted a recent update regarding v2).

Does the webworkify dependency need to be bumped now? Has anyone got an up-to-date gist or something of this working?

😄 🔫

[davidhampgonsalves]

@gaving If you are getting that error then webworkify is probably being bundled which in my experience is a sign that the mapbox-gl-js src is being used rather then the prebuild dist. To debug I deleted the contents of node_modules/mapbox-gl/js/ since most of that isn't needed and then followed those errors. Using just the above aliases is currently working for me (you would probably need to adjust your paths) on 1.7.0.

[gaving]

@davidhampgonsalves 👍 Thanks for the tip, this got things working.

Turns out the paths weren't resolving correctly (I'm using nwb and had stripped out __dirname thinking substituting './node_modules' would do it, but it turns out you need the full absolute path). Paths didn't need adjusted.

Thanks again for the heads up, been a good couple of hours getting to the bottom of that!

[cpietsch]

worked for me

alias: {
      'mapbox-gl/js/geo/transform': path.join(__dirname, "/node_modules/mapbox-gl/js/geo/transform"),
      'mapbox-gl': path.join(__dirname, "/node_modules/mapbox-gl/dist/mapbox-gl.js")
    }

[kachkaev]

@cpietsch which version of mapbox-gl were you using? I've tried your solution got this:

ERROR in ./~/mapbox-gl/js/util/util.js
Module parse failed: /home/lhrazk/-/projects/wb/1611-civitas-portal/web/node_modules/mapbox-gl/js/util/util.js Unexpected token (15:35)
You may need an appropriate loader to handle this file type.
|  * @private
|  */

| exports.easeCubicInOut = function(t: number): number {
|     if (t <= 0) return 0;
|     if (t >= 1) return 1;
 @ ./~/mapbox-gl/js/geo/transform.js 6:11-34
 @ ./~/react-map-gl/dist/utils/transform.js
 @ ./~/react-map-gl/dist/map.react.js
 @ ./~/react-map-gl/dist/index.js
 @ ./~/react-map-gl/index.js

This may be caused by the introduction of flow in mapbox-gl. Any thoughts?

---

__UPD:__ I got this fixed. It turned out I did not have Flow transpiler in my babel config.

1. npm install babel-plugin-transform-flow-strip-types --save-dev

2. In .babelrc or "babel" section in package.json:

"plugins": [
    "...other plugins...",
    "transform-flow-strip-types"
],

1. If your webpack loader is configured to ignore stuff in node_modules (which is a good idea for build performance), amend this rule to make mapbox-gl/js an exception:

loaders: [{
  test: /\.js$/,
  loader: 'babel',
  // exclude: /node_modules/, // remove
  exclude: /node_modules\/(?!mapbox-gl\/js)/, // add
}, {
// ...

1. If you've already had .flowconfig in your project's directory, make sure that node_modules is not excluded there.

[balthazar]

For all the folks that followed this issue, please note that a working webpack example can be found in the deck.gl repo. I will land a PR soon to reference this in the Readme.

Sorry for the wait! 😁

[Shadowman4205]

I am trying use this package but i get this error

Error: Cannot find module 'gl'
, i searched in issues but cannot get it solved
I try use it with react starter kit

[ibgreen]

Error: Cannot find module 'gl'

You should not see this error in the browser. If you are trying to run mapbox-gl in node, it will try to load gl (headless-gl, a webgl implementation for Node.js). Just yarn add gl or npm install --save gl and try again (you may also need to install jsdom and sinon).

[abmai]

@Shadowman4205 what version of react-map-gl are you installing?

[G2Jose]

@Apercu That link seems to be broken - https://github.com/uber/deck.gl/tree/master/exhibits/webpack

[balthazar]

@G2Jose Thanks, link updated

[Shadowman4205]

@ibgreen My brain is going to explode. I tried ur solution but i get errors on installing gl i am getting this error.
Then i tried using this approach in my application

class Map extends React.Component {
    render() {
        var MapGL = require('react-map-gl');
        if (process.env.BROWSER) {
            return (
                <div>Browser</div>
            )
        }
        else { return <div>Test</div> }
    }
}

but i get this error

vendor.js:129692 Uncaught SyntaxError: Identifier 'Buffer' has already been declared
client.js:1 Uncaught ReferenceError: webpackJsonp is not defined
at client.js:1

@abmai i installed last version.

[abmai]

@Shadowman4205 last version being v3-alpha or v2.0.3?

The webpackJsonp seems like a webpack-related issue, are you building your whole application using webpack?

FWIW - you should try the following, in order to get around requiring gl because of server-side rendering (if you're doing any of that).

const isBrowser = require('is-browser'); // npm package

var MapGL = 'div';
if (isBrowser) {
  MapGL = require('react-map-gl');
}

class Map extends React.Component {
  render() {
    return (
       <MapGL ... />
    )
  }
}

[Shadowman4205]

@abmai
I am using 2.0.3 version.
Yeah i am using webpack for more specific i have used react starter kit.
I tried this package "is-browser" but still same with

process.env.BROWSER

[balthazar]

is-browser is browserify specific and won't work in webpack. You need to use something else, like the BROWSER env maybe if you use the webpack define plugin (but be careful of the real BROWSER variable), or check window (also be careful if you intent to mock it with something like jsdom for the tests)

[calocan]

I'm trying to use the react-map-gl module with Webpack 2 but without babel (to avoid debugging wiht sourcemaps). I followed the instructions and have

alias: { 'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js'), },

in my webpack.config.js. When I start webpack I get the following error:

ERROR in ./node_modules/mapbox-gl/js/geo/coordinate.js
Module parse failed: /Users/andy/code/rescape_ramble/node_modules/mapbox-gl/js/geo/coordinate.js Unexpected token (14:10)
You may need an appropriate loader to handle this file type.
| */
| class Coordinate {
| column: number;
| row: number;
| zoom: number;
@ ./node_modules/mapbox-gl/js/geo/transform.js 5:17-40
@ ./node_modules/react-map-gl/dist/utils/transform.js
@ ./node_modules/react-map-gl/dist/map.react.js
@ ./node_modules/react-map-gl/dist/index.js
@ ./node_modules/react-map-gl/index.js

Does anyone know why react-map-gl's import of mapbox-gl is not aliasing to ./node_modules/mapbox-gl/dist/mapbox-gl.js? It seems like webpack should correctly process the import and avoid using the mabox source with the typescript in it. Thanks.

[ibgreen]

@calocan Looks like you are using react-map-gl v2. This has been fixed in v3.

[calocan]

Thanks, I missed that update. That fixed it.