React-map-gl: Unable to make it work with Webpack

[nderkach]

I'm trying to figure out how to make react-map-gl work with the latest webpack (2.1.0-beta.25).
So far I've tried to port suggested webpack config from here, but no luck.

Here is a sample repository for the project I'm trying to build: https://github.com/nderkach/react-boilerplate

At the current step I'm getting the following error:

ERROR in ./~/react-map-gl/dist/utils/transform.js
Module not found: Error: Can't resolve 'mapbox-gl/js/geo/transform' in '/Users/nderkach/Development/react-boilerplate/node_modules/react-map-gl/dist/utils'
 @ ./~/react-map-gl/dist/utils/transform.js 11:17-54
 @ ./~/react-map-gl/dist/map.react.js
 @ ./~/react-map-gl/dist/index.js
 @ ./~/react-map-gl/index.js
 @ dll reactBoilerplateDeps 

Somehow having 'mapbox-gl/js/geo/transform': resolve('./node_modules/mapbox-gl/js/geo/transform.js') alias doesn't help either. Any advice on where to dig please?

[balthazar]

The deck.gl example is not using a beta version. I would suggest downgrading if you want support.

[ibgreen]

@nderkach - The dev branch in this repo is now based on webpack 2, look at the webpack config file in the example. Contrary to initial expectations, it was actually fairly straightforward to make it work using the instructions on the mapbox-gl-js README.

[kachkaev]

@nderkach were you able to solve the issue? I can't make npm run build work in react-boilerplate after adding react-map-gl.

[kachkaev]

Ok, here's what solved this problem form me in react-boilerplate:

internals/webpack/webpack.base.babel.js

@@ @@
    loaders: [{
      test: /\.js$/, // Transform all .js files required somewhere with Babel
      loader: 'babel-loader',
-      exclude: /node_modules/,
+      include: [
+        path.resolve(process.cwd(), 'app'),
+        path.resolve(process.cwd(), 'node_modules/mapbox-gl/js'),
+      ],
      query: options.babelQuery,
@@ @@
  resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
+    alias: {
+      'mapbox-gl$': path.join(__dirname, '../../node_modules/mapbox-gl/dist/mapbox-gl.js'),
+    },
},

package.json

    "env": {
      "production": {
-        "only": [
-          "app"
-        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements"
        ]
      },

The second patch to hours to discover. Without it mapbox-gl/js/geo/transform (which is being referenced from react-map-gl) as well as its own includes will not go through babel and the build will fail at the UglifyJS stage (the plugin expects all js to be ES5 and crashes when seeing an untranspiled class definition).

All works now both in dev and prod!

[nderkach]

@kachkaev I ended up using this project as a boilerplate: https://github.com/KrateLabs/KrateLabs-App and calling mapbox-gl-js directly.

[balthazar]

https://github.com/uber/react-map-gl/pull/186, you can look at the exhibits and soon landing on dev.