Getting 'Module parse failed' using suggested config

[Manuel Nas]

Hi everyone,

I'm trying to use Cesium 1.31.0 in my React project using webpack but I keep getting the same error:

Project is running at http://localhost:8080/

webpack output is served from /

Content not from webpack is served from C:\projects\Web Network Analysis\public\src

Hash: 94a02afbd667b1bea74c

Version: webpack 2.2.1

Time: 3694ms

        Asset     Size  Chunks                    Chunk Names

client.min.js  3.17 MB       0  [emitted]  [big]  main

chunk    {0} client.min.js (main) 1.15 MB [entry] [rendered]

   [10] ./~/react/react.js 56 bytes {0} [built]

  [122] ./~/react-router/es/index.js 1.46 kB {0} [built]

  [144] (webpack)/hot/emitter.js 77 bytes {0} [built]

  [145] ./js/client.js 940 bytes {0} [built]

  [146] (webpack)-dev-server/client?http://localhost:8080 5.28 kB {0} [built]

  [147] (webpack)/hot/dev-server.js 1.57 kB {0} [built]

  [150] ./js/pages/Layout.js 2.36 kB {0} [built]

  [151] ./js/pages/MapPage.js 2.68 kB {0} [built]

  [181] ./~/react-dom/index.js 59 bytes {0} [built]

  [317] ./~/strip-ansi/index.js 161 bytes {0} [built]

  [319] ./~/url/url.js 23.3 kB {0} [built]

  [321] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]

  [322] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]

  [324] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]

  [325] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ../js/client.js 52 bytes {0} [built]

     + 311 hidden modules

WARNING in ./~/cesium/index.js

11:35-42 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

ERROR in ./~/requirejs/bin/r.js

Module parse failed: C:\projects\Web Network Analysis\public\node_modules\requirejs\bin\r.js Unexpected character '#' (1:0)

You may need an appropriate loader to handle this file type.

| #!/usr/bin/env node

| /**

|  * @license r.js 2.3.3 Copyright jQuery Foundation and other contributors.

 @ ./~/cesium/index.js 5:16-36

 @ ./js/pages/MapPage.js

 @ ./js/client.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ../js/client.js

webpack: Failed to compile.

This is my webpack.config.js:

var debug = process.env.NODE_ENV !== "production";

var webpack = require('webpack');

var path = require('path');

module.exports = {

  context: path.join(__dirname, "src"),

  devtool: debug ? "inline-sourcemap" : null,

  entry: "../js/client.js",

  module: {

    unknownContextCritical: false,

    //unknownContextRegExp: /^.\/.*$/,

    loaders: [

      { test: /\.css$/, loader: "style!css" },

      {

          test: /\.(png|gif|jpg|jpeg)$/,

          loader: 'file-loader'

      },

      {

        test: /\.js?$/,

        exclude: /(node_modules|bower_components)/,

        loader: 'babel-loader',

        query: {

          presets: ['react', 'es2015', 'stage-0'],

          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],

        }

      }

    ]

  },

  output: {

    path: __dirname + "/src/",

    filename: "client.min.js",

    sourcePrefix : ''

  },

  plugins: debug ? [] : [

    new webpack.optimize.DedupePlugin(),

    new webpack.optimize.OccurenceOrderPlugin(),

    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),

    //new webpack.ContextReplacementPlugin(/moment-jdateformatparser/, /moment-jdateformatparser\.js/),

  ],

};

I have implemented the fixes suggested in this post: https://github.com/AnalyticalGraphicsInc/cesium/issues/4876 but the error keeps occuring. I have also executed the steps under "I've already got webpack set up, just tell me how to use Cesium" in this link: https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/ still the error persists.

Does any of you know how to remedy this issue? Thanks in advance! :)

[Mark Erikson]

Gotta say, that seems rather odd.  Those exact two config edits definitely work for me.  I'm actually working on a blog post that talks about using Cesium with Webpack, and the first part of the post will discuss taking a Create-React-App project, ejecting, and modifying those two values to let Cesium work okay.

Although... looking at your error messages, it's complaining about /~/cesium/index.js and /~/requirejs/bin/r.js .  That may be the issue.  How are you actually _importing_ Cesium files into your application code?

[Manuel Nas]

I wasn't quite sure why it's still giving me those errors but according to an answer on my question on StackOverflow it's because:

the cesium npm package does not define an entry point – I believe that is the problem.

This is the fix that was proposed:

require('../../node_modules/cesium/Build/CesiumUnminified/Cesium.js');
const Cesium = window.Cesium;

Even though I hoped to be able to use a regular import (import Cesium from "cesium";) the issue was fixed by using the above so I'll keep using it for the time being.

[Mark Erikson]

Ah.  Yeah, if you're doing 1import Cesium from "cesium"1, that probably won't work directly.  You need to import specific classes, like `import Viewer from "cesium/Source/Widgets/Viewer"`. 

I've almost got that blog post I mentioned ready, and hope to publish it Tuesday or Wednesday.  I'll post a link in this group when I publish it.

[Mark Erikson]

As promised, just published a 2-part post on "Declaratively Rendering Earth in 3D: Using Cesium with React and Webpack".  Part 1 covers basic Cesium+Webpack setup and build optimization with DllPlugin. Part 2 shows declarative React components that wrap imperative APIs:

http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/
http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-2-cesium-react/

Hope this helps!