Module parse failed: Unexpected character '#' about cesium-weather

[markerikson]

Looks like it's a use of this particular Webpack config option: https://webpack.js.org/configuration/other-options/#amd

In combination with this change to Cesium's code to look for that special value:

CesiumGS/cesium@9aa2dff#diff-1f2d871223708f3eeff38a7821941b90

[immiao]

Thanks a lot for the tutorial!

After I put

    amd: {
        // Enable webpack-friendly use of require in Cesium
        toUrlUndefined: true
    },

in my webpack.config.js, it works.

[immiao]

Resolved:

https://cesiumjs.org/forum/#!msg/cesium-dev/d69RrgOVu9c/RfCoBqrTBAAJ
http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/

[immiao]

Well, I followed the instruction but still got an error. My code structure is slightly different from the instruction. What could be the reason?

bundle.js:168429 Error constructing CesiumWidget.
Visit <a href="http://get.webgl.org">http://get.webgl.org</a> to verify that your web browser and hardware support WebGL.  Consider trying a different web browser or updating your video drivers.  Detailed error information is below:
Error: Cannot find module "."
Error: Cannot find module "."
    at webpackMissingModule (bundle.js:29861)
    at buildModuleUrl (bundle.js:29861)
    at new Globe (bundle.js:168694)
    at new CesiumWidget (bundle.js:168075)
    at new Viewer (bundle.js:103299)
    at App.componentDidMount (bundle.js:102847)
    at commitLifeCycles (bundle.js:96015)
    at commitAllLifeCycles (bundle.js:97191)
    at HTMLUnknownElement.callCallback (bundle.js:87787)
    at Object.invokeGuardedCallbackDev (bundle.js:87826)

My $PROJECT/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/App';
import './node_modules/bootstrap/dist/css/bootstrap.min.css';
import "cesium/Source/Widgets/widgets.css";
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl";

buildModuleUrl.setBaseUrl('./cesium/');
console.log(buildModuleUrl)

ReactDOM.render(<App />, document.getElementById('container'));

My $PROJECT/src/app.js:

import React, { Component } from 'react';
import Viewer from "cesium/Source/Widgets/Viewer/Viewer";

class App extends Component {
  componentDidMount() {
    var viewer = new Viewer(this.cesiumContainer);
  }

  render() {
    return (
      <div className="App">
        <div className="col-sm-9">
          <div id="cesiumContainer" ref={ element => this.cesiumContainer = element }/>
        </div>
        <div className="col-sm-3">
          Hello
        </div>
      </div>
    );
  }
}

export default App;

[markerikson]

Perhaps try removing the . from the module URL call? Like: buildModuleUrl.setBaseUrl('cesium/');

[immiao]

I just tried that. But it doesn't work and gives the same error.

[markerikson]

Hmm. My next suggestion would be to try following the new Webpack setup instructions in the Cesium docs: https://cesiumjs.org/tutorials/cesium-and-webpack/

[immiao]

But how does this work? I search around the Webpack documentation but can't find any information. Did Cesium team contribute this special thing to Webpack?

[immiao]

Thanks a lot!!