Building in webpack throws error #21

KyleAMathews · 2015-11-13T03:33:45Z

ERROR in ./~/glify/index.js
Module not found: Error: Cannot resolve module 'fs' in /root/RelateRocket/webapp/node_modules/glify
 @ ./~/glify/index.js 5:9-22

The text was updated successfully, but these errors were encountered:

KyleAMathews · 2015-11-13T03:34:40Z

The answer apparently is to add some configuration to my webpack config file. It'd be nice if this was documented.

gnavvy · 2015-11-13T03:39:23Z

Known issue: mapbox/mapbox-gl-js#1649

shanecav · 2015-12-23T11:24:02Z

@KyleAMathews What configuration did you add to webpack to make it work? I'm having the same issue.

The fix suggested at mapbox/mapbox-gl-js#1649 (adding node: { fs: "empty" } to my webpack config) allowed it to be bundled without errors, but when I view the app in browser I get "Uncaught TypeError: fs.readFileSync is not a function". I see that this is an ongoing issue with mapbox/mapbox-gl-js, but I'm curious if you found a way around it for the time being.

KyleAMathews · 2015-12-23T17:00:36Z

Shane, I didn't ever get it to work actually :-)
On Wed, Dec 23, 2015 at 3:25 AM Shane Cavaliere notifications@github.com
wrote:

@KyleAMathews https://github.com/KyleAMathews What configuration did
you add to webpack to make it work? I'm having the same issue.

The fix suggested at mapbox/mapbox-gl-js#1649
mapbox/mapbox-gl-js#1649 (adding node: { fs:
"empty" } to my webpack config) allowed it to be bundled without errors,
but when I view the app in browser I get "Uncaught TypeError:
fs.readFileSync is not a function".

—
Reply to this email directly or view it on GitHub
#21 (comment).

imgettingdeported · 2015-12-26T11:42:45Z

has anyone been able to build successfully with webpack?

yuvadm · 2016-02-11T16:04:35Z

@lafin do you have a complete example for that? I've added the config, but I'm still stuck with the fs.readFileSync problem.

yuvadm · 2016-02-11T19:59:35Z

thanks for the repo @lafin! unfortunately I can't see any hints as to why this error is still popping up. Any idea where exactly this call is made to the fs module?

yuvadm · 2016-02-11T20:06:28Z

It's unclear why despite using

{
  test: /\.js$/,
  include: path.resolve(__dirname, 'node_modules/mapbox-gl/js/render/shaders.js'),
  loader: 'transform/cacheable?brfs'
},

I'm still getting

ERROR in ./~/react-map-gl/~/mapbox-gl/js/render/shaders.js
Module not found: Error: Cannot resolve module 'fs' in .../node_modules/react-map-gl/node_modules/mapbox-gl/js/render
 @ ./~/react-map-gl/~/mapbox-gl/js/render/shaders.js 3:9-22

yuvadm · 2016-02-11T20:12:51Z

@lafin Yeah I see the problem, react-map-gl is bringing in mapbox-gl as a subdependency, so the paths aren't matching.

vicapow · 2016-02-19T23:41:34Z

Hey @lafin, I tried to run the demo, but I'm getting some errors. Did you miss some deps?

Module build failed: ReferenceError: Promise is not defined

yuvadm · 2016-02-20T07:55:27Z

@vicapow there might be some polyfill package missing, maybe es6-promise or babel-polyfill?

cezary · 2016-03-08T00:49:03Z

@shanecav @imgettingdeported @KyleAMathews @yuvadm I was able to get it working with webpack by replacing mapbox-gl with a webpack-compatible fork I made:

Install cezary/mapbox-gl-js#webpack, worker-loader, shader-loader and json-loader.
In your webpack config file set resolve.alias to

{
  'mapbox-gl/js/geo/transform': path.resolve('./node_modules/mapbox-gl/js/geo/transform'),
  'mapbox-gl': path.resolve('./node_modules/mapbox-gl')
}

and add

{ test: /\.worker.js$/, loader: 'worker', query: { inline: true }},
{ test: /\.glsl$/, loader: 'shader' },
{ test: /\.json$/, loader: 'json' }

to your loaders.

The fork hasn't been kept in sync with original, but you can probably replicate the changes I made here.

Splact · 2016-03-10T13:53:28Z

@cezary I tried your solution but with no results. Now I get this message when I execute webpack:

ERROR in multi app
Module not found: Error: Cannot resolve 'file' or 'directory' PROJECTROOT\app in PROJECTROOT
 @ multi app

Any ideas?

joewood · 2016-04-18T18:09:16Z

Not sure if this was solved, but I'm building with webpack successfully. The config part of interest is:

var path = require("path");
var webpack = require("webpack");
var transform = require("transform-loader");

module.exports = {
::  ::
  resolve: {
   ::                ::
        alias: {
            webworkify: 'webworkify-webpack'
        }
    },
    module: {
        loaders: [
            {
                test: /render[\/\\]shaders\.js$/,
                loader: 'transform/cacheable',
                query: "brfs"
            },
            {
                test: /[\/\\]webworkify[\/\\]index.js\.js$/,
                loader: 'worker'
            },

I also had to pull in a bunch of dev dependencies:

    "babel-core": "^6.7.6",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "bootstrap-webpack": "^0.0.5",
    "transform-loader": "^0.2.3",
    "webworkify-webpack": "^1.0.6"

ankitduseja · 2016-05-16T06:54:23Z

@joewood I followed your webpack config but now I am getting this:
Error: Cannot find module 'gl' [1] at Function.Module._resolveFilename (module.js:438:15) [1] at Function._module3.default._resolveFilename (/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:403:34) [1] at Function.module._load (/node_modules/piping/lib/launcher.js:24:23) [1] at Module.require (module.js:466:17) [1] at require (internal/module.js:20:19) [1] at Object.<anonymous> (/node_modules/mapbox-gl/js/util/canvas.js:6:10) [1] at Module._compile (module.js:541:32) [1] at Module._extensions..js (module.js:550:10) [1] at require.extensions.(anonymous function) (/node_modules/babel-register/lib/node.js:166:7) [1] at Object._module3.default._extensions.(anonymous function) [as .js] (/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:250:71)

I see a similar error here:
mapbox/mapbox-gl-js#828 (comment)
mapbox/mapbox-gl-js#1649

tsemerad · 2016-05-24T20:46:37Z

@ankitduseja I'm getting the same Cannot resolve module 'gl' but also Cannot resolve module 'autobind-decorator':

ERROR in ./~/react-map-gl/dist/map.react.js
Module not found: Error: Cannot resolve module 'autobind-decorator' in node_modules/react-map-gl/dist
 @ ./~/react-map-gl/dist/map.react.js 45:25-54

ERROR in ./~/react-map-gl/dist/overlays/draggable-points.react.js
Module not found: Error: Cannot resolve module 'autobind-decorator' in node_modules/react-map-gl/dist/overlays
 @ ./~/react-map-gl/dist/overlays/draggable-points.react.js 36:25-54

ERROR in ./~/react-map-gl/dist/map-interactions.react.js
Module not found: Error: Cannot resolve module 'autobind-decorator' in node_modules/react-map-gl/dist
 @ ./~/react-map-gl/dist/map-interactions.react.js 34:25-54

ERROR in ./~/mapbox-gl/js/util/canvas.js
Module not found: Error: Cannot resolve module 'gl' in node_modules/mapbox-gl/js/util
 @ ./~/mapbox-gl/js/util/canvas.js 6:9-22

shanecav · 2016-05-25T00:28:50Z

@tsemerad I'm also getting the Cannot resolve module 'autobind-decorator' error. I had to npm install --save autobind-decorator to get it to work.

However I'm not getting the Cannot resolve module 'gl' error. See my comment in the corresponding mapbox-gl-js issue.

tiagocpontesp · 2016-05-26T22:43:57Z

Also had to jspm install npm:autobind-decorator.

tsemerad · 2016-05-31T22:15:18Z

@shanecav I solved the Cannot resolve module 'gl' issue. It turns out my webpack config was adding mapbox-gl to externals. Updating my externals to just a few explicit packages (rather than a function that was auto-generating a list of packages to add to externals) fixed it.

infacq · 2016-06-05T01:56:34Z

@tsemerad do you mind sharing your webpack.config

cazzer · 2016-06-07T06:29:03Z

In case any of you are seeing Cannot read property "call" of undefined or similar, try grabbing webworkify-webpack@1.0.6. This, in addition to Mapbox's own steps for webpack, did the trick for me. Thanks to Mike Williamson's blog post and the comments therein for pointing it out.

For anyone interested, I only had to add the following to my webpack.config:

module.exports = {
  resolve: {
    alias: {
      webworkify: 'webworkify-webpack'
    },
    ...
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      }, {
        test: /use_program\.js$/,
        loader: 'transform/cacheable?brfs'
      },
      ...
    ],
    postLoaders: [
      {
        include: /node_modules\/mapbox-gl/,
        loader: 'transform',
        query: 'brfs'
      }
    ]
  },
  ...
}

I also had to install gl as others have suggested.

tsemerad · 2016-06-17T00:45:19Z

@infacq Sorry for the delay. My webpack config is a bit convoluted, but I posted it in a gist here:
https://gist.github.com/tsemerad/41fd8d8c61762b3a48a50e42ce4256c0

* Add Mapbox GL and related libraries required to serve maps from Webpack. * Update Webpack config based on Mapbox example and https://mikewilliamson.wordpress.com/2016/02/24/using-mapbox-gl-and-webpack-together/, and visgl/react-map-gl#21 (comment). * Create map component and add to SightingsList component. Closes #8

Stupidism · 2016-07-07T09:42:59Z

I found myself the smallest change from a webpack config to go through this error, but I got this sources.map is not a function error.
Anybody help me?

   resolve: {
+    alias: {
+      webworkify: 'webworkify-webpack'
+    }
   },
loaders = [{
+{
+  test: /mapbox-gl.+\.js$/,
+  loader: 'transform/cacheable?brfs'
+},
]

kachkaev · 2016-07-25T13:37:10Z

I've tried adding a simple react-map-gl into a new app using react-boilerplate but got stuck with an empty single-colour map in dev mode.

MWE here: https://github.com/kachkaev/react-boilerplate-react-map-gl-mwe

A related issue seems to be here: #96

Has anyone used the same boilerplate? Any ideas?

ibgreen · 2016-08-26T00:10:53Z

Given the new instructions from mapbox on how to build with webpack (see README for link) I will close this for now.

If there are react-map-gl specific issues with webpack, the best approach would be to open a PR with a small example, see #112

Jinnified · 2016-09-10T08:28:16Z

@ankitduseja could you please tell me how did you solve that Cannot find module 'gl' issue? it appears npm hangs when i am trying to install the gl module

lafin mentioned this issue Feb 6, 2016

Add webpack support mapbox/mapbox-gl-js#1649

Closed

cusspvz mentioned this issue Feb 17, 2016

Consider removing mapboxgl-js as a depedency #31

Closed

jwarning mentioned this issue May 4, 2016

Add props for bearing and pitch #73

Merged

simpixelated mentioned this issue Jun 11, 2016

switch to Mapbox custom map simpixelated/san-diego-downtown-mobility-plan#33

Open

caseycesari mentioned this issue Jun 29, 2016

Add hotspot map. caseycesari/ebird-hotspot-viewer#10

Merged

Stupidism mentioned this issue Jul 7, 2016

TypeError: sources.map is not a function borisirota/webworkify-webpack#6

Closed

kachkaev mentioned this issue Jul 25, 2016

Incompatable with web workers (e.g. react-map-gl)? react-boilerplate/react-boilerplate#784

Closed

ibgreen closed this as completed Aug 26, 2016

Jinnified mentioned this issue Sep 10, 2016

Error: Cannot find module 'gl' #121

Closed

impronunciable mentioned this issue Jan 10, 2017

Modules not found? vercel/next.js#719

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Building in webpack throws error #21

Building in webpack throws error #21

KyleAMathews commented Nov 13, 2015

KyleAMathews commented Nov 13, 2015

gnavvy commented Nov 13, 2015

shanecav commented Dec 23, 2015

KyleAMathews commented Dec 23, 2015

imgettingdeported commented Dec 26, 2015

yuvadm commented Feb 11, 2016

yuvadm commented Feb 11, 2016

yuvadm commented Feb 11, 2016

yuvadm commented Feb 11, 2016

vicapow commented Feb 19, 2016

yuvadm commented Feb 20, 2016

cezary commented Mar 8, 2016

Splact commented Mar 10, 2016

joewood commented Apr 18, 2016

ankitduseja commented May 16, 2016 •

edited

Loading

tsemerad commented May 24, 2016 •

edited

Loading

shanecav commented May 25, 2016

tiagocpontesp commented May 26, 2016

tsemerad commented May 31, 2016 •

edited

Loading

infacq commented Jun 5, 2016

cazzer commented Jun 7, 2016

tsemerad commented Jun 17, 2016

Stupidism commented Jul 7, 2016

kachkaev commented Jul 25, 2016 •

edited

Loading

ibgreen commented Aug 26, 2016

Jinnified commented Sep 10, 2016

Building in webpack throws error #21

Building in webpack throws error #21

Comments

KyleAMathews commented Nov 13, 2015

KyleAMathews commented Nov 13, 2015

gnavvy commented Nov 13, 2015

shanecav commented Dec 23, 2015

KyleAMathews commented Dec 23, 2015

imgettingdeported commented Dec 26, 2015

yuvadm commented Feb 11, 2016

yuvadm commented Feb 11, 2016

yuvadm commented Feb 11, 2016

yuvadm commented Feb 11, 2016

vicapow commented Feb 19, 2016

yuvadm commented Feb 20, 2016

cezary commented Mar 8, 2016

Splact commented Mar 10, 2016

joewood commented Apr 18, 2016

ankitduseja commented May 16, 2016 • edited Loading

tsemerad commented May 24, 2016 • edited Loading

shanecav commented May 25, 2016

tiagocpontesp commented May 26, 2016

tsemerad commented May 31, 2016 • edited Loading

infacq commented Jun 5, 2016

cazzer commented Jun 7, 2016

tsemerad commented Jun 17, 2016

Stupidism commented Jul 7, 2016

kachkaev commented Jul 25, 2016 • edited Loading

ibgreen commented Aug 26, 2016

Jinnified commented Sep 10, 2016

ankitduseja commented May 16, 2016 •

edited

Loading

tsemerad commented May 24, 2016 •

edited

Loading

tsemerad commented May 31, 2016 •

edited

Loading

kachkaev commented Jul 25, 2016 •

edited

Loading