Compile Error in webpack project

CesiumJS
1

Hi,

when I try to use the new packages “@cesium/engine” and “@cesium/widgets” in my Angular / Webpack project, I get a number of compiler warnings and errors like:

Warning: /path/to/project/node_modules/@cesium/widgets/Source/VRButton/VRButtonViewModel.js depends on 'nosleep.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

and

./node_modules/@cesium/engine/Source/Core/Resource.js:1843:15-28 - Error: Module not found: Error: Can't resolve 'url' in '/path/to/project/node_modules/@cesium/engine/Source/Core'

What is missing or wrong here?

2

Hi @google

You may need to provide some additional options for Webpack to resolve modules like url, http, https and zlib, as is shown in the cesium-webpack-example.

I’m not that familiar with Angular to provide a proper answer for those warnings, but I hope the step recommended above will resolve the build errors.

Sam.

1 Like
3

Hello @google :wave:

For the warning message, you will need to modify your angular.json file according to the information that is described in the provided link.

4

Thanks, I was a bit confused, that the Cesium code is actually being compiled. I was expecting the package to ship an already compiled version.

Nevertheless, I finally managed to get everything compiled. I had to add some additional dev-dependencies:

  • assert
  • browserify-zlib
  • https-browserify
  • stream-browserify
  • stream-http
  • url

Would be great, if these could be added as peer-dependencies to the package.json file in Cesium, so that users are notified about that, or as direct dependencies, so they are installed automatically.

Besides, I had to add patch settings in tsconfig.json:

"paths": {
    "http": [
        "node_modules/stream-http"
    ],
    "https": [
        "node_modules/https-browserify"
    ],
    "stream": [
        "node_modules/stream-browserify"
    ],
    "zlib": [
        "node_modules/browserify-zlib"
    ]
},

In addition, I had to a dd a bunch of entries in angular.json:

"allowedCommonJsDependencies": [
    "nosleep.js",
    "grapheme-splitter",
    "bitmap-sdf",
    "jsep",
    "urijs",
    "zlib",
    "url",
    "http",
    "https",
    "earcut",
    "mersenne-twister",
    "protobufjs/dist/minimal/protobuf.js"
],

Now, everything compiles and runs fine.

5

I have to correct myself. Using the current version of @cesium/engine and @cesium/widgets results in a compile error:

Error: node_modules/@cesium/widgets/index.d.ts:2052:26 - error TS2304: Cannot find name 'ContextOptions'.

2052         contextOptions?: ContextOptions;

It looks as if ContectOptions is missing in the import statement.

If I use the combined package, the error does not appear.

6

Glad you got things working!

Thanks, I was a bit confused, that the Cesium code is actually being compiled. I was expecting the package to ship an already compiled version.

There is a pre-built version shipped in Build/Cesium and Build/CesiumUnminified. However, if you are using a bundler such as webpack, it’s recommended to use the Source modules as you will benefit from optimizations such as tree shaking and dead code elimination.

It looks as if ContectOptions is missing in the import statement.

Thanks for the report! I think this is an error when generating typescript definition for the widgets package.

7

Opened ContextOptions is not properly imported to to the @cesium/widgets package · Issue #10963 · CesiumGS/cesium · GitHub to track the issue.