Demo App Fails Webpack Build

[MattSkewbie]

I'm currently unable to build the demo-app project in the /examples directory. Following the included readme, I ran npm install followed by npm start, but I'm receiving the following output. Any ideas? I'm not particularly well-versed in React, so am I missing something obvious?

> @ start /Users/username/Projects/demos/kepler-demo/node_modules/kepler.gl/examples/demo-app
> webpack-dev-server --progress --hot --open

 10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
 10% building modules 3/3 modules 0 activewebpack: wait until bundle finished: /
Hash: bfbb95190c60eccaeb52
Version: webpack 2.7.0
Time: 588ms
        Asset    Size  Chunks                    Chunk Names
    bundle.js  351 kB       0  [emitted]  [big]  app
bundle.js.map  413 kB       0  [emitted]         app
chunk    {0} bundle.js, bundle.js.map (app) 321 kB [entry] [rendered]
    [2] (webpack)/hot/emitter.js 77 bytes {0} [built]
    [3] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
    [4] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
    [5] ./src/main.js 369 bytes {0} [built] [failed] [1 error]
    [7] ./~/ansi-regex/index.js 135 bytes {0} [built]
    [8] ./~/events/events.js 8.33 kB {0} [built]
    [9] ./~/html-entities/index.js 231 bytes {0} [built]
   [12] ./~/loglevel/lib/loglevel.js 7.86 kB {0} [built]
   [18] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [19] ./~/url/url.js 23.3 kB {0} [built]
   [21] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
   [22] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
   [24] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
   [25] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
   [26] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
     + 12 hidden modules

ERROR in ./src/main.js
Module parse failed: /Users/username/Projects/demos/kepler-demo/node_modules/kepler.gl/examples/demo-app/src/main.js Unexpected token (36:2)
You may need an appropriate loader to handle this file type.
|
| const Root = () => (
|   <Provider store={store}>
|     <Router history={history}>
|       <Route path="/(:id)" component={App} />
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
webpack: Failed to compile.

[MattSkewbie]

I should also add that I installed kepler.gl via npm install --save kepler.gl. When I clone the git repository itself and then run npm install and npm start, it runs fine. Is it possible the npm package is behind?

[chrisirhc]

Seeing You may need an appropriate loader to handle this file type., I believe this is a webpack configuration issue. If you're starting out, I would suggest heading over to http://vis.academy/#/kepler.gl/setup to try out the setup and following the configuration there.

[MattSkewbie]

Thanks Chris, it does seem like a webpack configuration issue. I am able to get the demo app up and running through a git clone of this repository, but not if I install kepler.gl using npm. When I installed it using npm, I navigated into the /examples/demo-app folder and then tried to run npm install and npm start, thinking that would run the project, but that's when I encountered the error.

It seems like that is not the preferred way to run the example project, so to anyone else who encounters this issue, I would recommend using the git clone method described in the setup link that Chris shared.

Though it's probably worth leaving this issue open until you can run the example after an npm install?

[chrisirhc]

I see the issue now.

When I installed it using npm, I navigated into the /examples/demo-app folder and then tried to run npm install and npm start, thinking that would run the project, but that's when I encountered the error.

This is generally not supported. In fact, the npm package should not include the /examples folder. Typically, the workflow is inverted: people npm install the project, then use the package in their project, and should not attempt to run examples within the installed package.

I believe the bug here is that the package actually includes /examples folder. We should consider excluding it, which would mean smaller npm package download, and less confusion for users. The npm package should only include files that users would depend on while they include this package. Examples and documentation typically aren't part of the package.

We can do this by adding an .npmignore file: https://docs.npmjs.com/misc/developers

Agreed to leave this open until it's addressed.

[MattSkewbie]

Makes sense, thanks for your help!

[heshan0131]

@MattSkewbie, the demo-app is not supposed to be run inside node_modules/kepler.gl you should try build the demo-app by git clone git@github.com:uber/kepler.gl.git first then npm install && npm start.
The examples are included explicitly in the npm package by specified in files property in package.json.

[MattSkewbie]

@heshan0131, thanks! I understand the paradigm now, my mistake.

[roqueleal]

@heshan0131 @MattSkewbie @chrisirhc @maryzam Hello, like the previous comments I tried to build the application by changing the files package.json & webpack of the example "custom-reducer", although I get to create the build file, it does not seem to call the respective file.

I think the bundle.js.map file is also missing, I do not know how to create https://github.com/roqueleal/roqueleal.github.io/tree/master/chile

https://github.com/roqueleal/roqueleal.github.io/tree/master/chile

Thanks for your comments

[maryzam]

Hello, @roqueleal! I quickly checked your repo and found at least one problem: there is no .babelrc file with list of presets to compile source core based on React correctly. Also, bundle.js.map is a file you need only for debugging compiled script and it'll be generated automatically by webpack if you add devtool:'source-map' to the webpack.config (see the original example). But this file does not affect tthe application running or not.
Maybe there are some other issues, but I can't figure out and can only suggest to try start from the begging, because I can assure you that the official example works fine (I've just test it).

[macrigiuseppe]

It looks like the official example works fine. I am gonna close this one.

[julianheinrich]

Hi, I am running into a webpack issue trying to run the demo-app on RHEL with node v8.9.4:
npm install followed by npm start from within examples/demo-app/ of a fresh git clone of the master branch produces the following output:

module.js:540
    throw err;
    ^

Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/kepler.gl/examples/webpack.config.local.js:30:17)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)

it seems that webpack.config.local.js from the parent dir is required from webpack.config.js in the demo-app dir, is that the expected behaviour?

Thanks for any hints!

[b27lu]

@julianheinrich I'm running into the same issue. The webpack.config.local.js is like a decorator for webpack.config.js and it adds babel rules and hot reload settings.

The problem is that webpack.config.local.js requires webpack which is only installed inside demo-app. As a temporarily workaround, comment out const webpack = require('webpack'); and

      new webpack.EnvironmentPlugin([
        'MapboxAccessToken',
        'DropboxClientId',
        'MapboxExportToken'
      ])

in webpack.config.local.js will work. Another option is to use the webpack installed in demo-app like const webpack = require('./demo-app/node_modules/webpack');. Anyway, I'm also waiting for hints from others.

[julianheinrich]

Thanks for the hint. If someone finds this thread, the README in the examples is somewhat misleading. I was able to run it by issuing yarn install and yarn start from the root directory of the project. I guess I missed that in the main documentation and jumped right at the demo-app.