Requirejs error in cesiumjs using webpack

Question

I tried to run my project using hot build (does the same using normal build) and it gives me this 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 what my webpack.config.js looks like (it does have the Cesium fixes mentioned here):

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,
    loaders: [
      {
        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 }),
  ],
};

I've tried to update every module but it doesn't help at all. Searching for the error only gives me messages about webpack@2 not having this issue, but as you can see I'm using [email protected].

Does anyone know how to remedy this error?

Answer 1

this did it for me:

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

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

Answer 2

I use Webpack along with html-webpack-plugin and html-webpack-template in order to import Cesium library in my ES6+ code.

1. Install html-webpack-plugin and html-webpack-template:

   npm install html-webpack-plugin html-webpack-template
   

   or

   yarn add html-webpack-plugin html-webpack-template
   

2. Considering that dist is our output directory use externals option to exclude Cesium from the build and scripts option of html-webpack-template to append Cesium script to HTML:

   webpack.config.babel.js

   import HtmlPlugin from 'html-webpack-plugin';
   import htmlTemplate from 'html-webpack-template';
   
   export default ((env, argv) => {
     const { mode = 'development' } = argv;
     return {
       context: path.resolve(__dirname, 'src'),
       entry: {
         index: ['@babel/polyfill', './index.js']
       },
       output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'js/[name].' + (mode === 'development' ? '' : '[chunkhash:6].') + 'js'
       },
       externals: {
         cesium: 'Cesium'
       },
       plugins: [
         new HtmlPlugin({
           filename: path.resolve(__dirname, 'dist/index.html'),
           inject: false,
           template: htmlTemplate,
           title: 'GeoPort',
           appMountId: 'container',
           scripts: ['cesium/Cesium.js']
         })
       ],
       // other Webpack options go here...
     };
   })
   

3. You have to put Cesium files in dist/cesium directory. I usually use NPM script for this purpose based on copyfiles:

   package.json

   {
     ...
     scripts: {
       "build": "npm run copy:cesium && webpack --mode=production",
       "copy:cesium": "copyfiles -s -u 4 \"node_modules/cesium/Build/Cesium/**/*\" dist/cesium",
     }
   } 
   

4. Now you can import Cesium in your source code:

   import Cesium from 'cesium';
   
   const cesiumWidget = new Cesium.CesiumWidget('globe');