cesiumgs / cesium-webpack-example Goto Github PK

Hi,

Although it is advertised here and on the Cesium homepage that Cesium now supports ES6, this is not entirely true. ES6 was not implemented directly in order to only use "import" and "export" functions.

Have you ever tried to use "await" and "async"?
You will immediately notice that "await" is marked as an error, because the whole thing runs as "COMMONJS" and it is not supported by it.

I noticed that in which I wanted to use Promise in my Typescript and therefore cannot use "await" at all. As a result, asynchronous use is denied to me. I was told that in my tsconfig.json file I would have to change the module to, for example, "esNext" and the "target" to at least 2017. As soon as I do that, all of the Cesium code stops working. The script from me doesn't know either "Viewer" or "ION" as an example.

Since the "Promise" functionality is very important, I ask for urgent help and support in converting this to ES6 or higher.

Thank you in advance for the trouble.

Many greetings

CesiumGS/cesium#11773 should remove the need to list the external node dependencies. Once this is in this example can be updated to remove that configuration.

To reproduce, clone: https://github.com/tinco/cesium-webpack-example

Run

npm install
npm start

For me (on MacOSX, Node v12.12.0, NPM 6.11.3) it fails with this message:

    ERROR in ./node_modules/esm/esm.js
    Module not found: Error: Can't resolve 'module' in '/Users/tinco/Source/aeroscan/cesium-webpack-example/node_modules/esm'
     @ ./node_modules/esm/esm.js 1:358-375
     @ ./node_modules/cesium/index.js
     @ ./src/index.js

hello, when my webpack.config.js is same as yours, and start the app, CLI tells me:

WARNING in ./node_modules/cesium/Source/Core/TaskProcessor.js
 140:27-34 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
  @ ./node_modules/cesium/Source/Core/TaskProcessor.js
  @ ./node_modules/cesium/Source/Core/QuantizedMeshTerrainData.js
  @ ./node_modules/cesium/Source/Cesium.js
  @ ./src/index.js
  @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

 WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js
 57:15-22 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
  @ ./node_modules/cesium/Source/Core/buildModuleUrl.js
  @ ./node_modules/cesium/Source/Cesium.js
  @ ./src/index.js
  @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

 WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js
 77:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
  @ ./node_modules/cesium/Source/Core/buildModuleUrl.js
  @ ./node_modules/cesium/Source/Cesium.js
  @ ./src/index.js
  @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js;

the browser told me :

Error constructing CesiumWidget.
Visit http://get.webgl.org 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 (http://localhost:8080/cesium.js:30375:69)
    at buildModuleUrl (http://localhost:8080/cesium.js:30375:147)
    at new Globe (http://localhost:8080/cesium.js:192424:34)
    at new CesiumWidget (http://localhost:8080/cesium.js:218537:25)
    at new Viewer (http://localhost:8080/cesium.js:250613:28)
    at Object.<anonymous> (http://localhost:8080/cesium.js:232598:14)
    at __webpack_require__ (http://localhost:8080/cesium.js:55:30)
    at Object.<anonymous> (http://localhost:8080/cesium.js:252799:18)
    at __webpack_require__ (http://localhost:8080/cesium.js:55:30)
    at webpackJsonpCallback (http://localhost:8080/cesium.js:26:23)

I promise that my browser is updated.

webpack >= v2.0.0 support json by default, so should omit json load configuration in webpack.config.js

I cloned the cesium-webpack-example and try to run it on localhost. errors show that no createWorldTerrain in "cesium".
and then, I checked the API doc, and found it should be createWorldTerrainAsync.
I think the cesium-webpack-example uses the old version of cesium and it should be updated.

createWorldTerrain -> createWorldTerrainAsync
createOsmBuildings -> createOsmBuildingsAsync

Hi,

It would be useful with an example that works with webpack v5.

Regards

From CesiumGS/cesium#6319 (comment)

The documentation for Cesium and Webpack appears to be broken around 1.47, 1.48 . Whenever the iframe implementation was enforced as the dom container for the map.

Heads up, I figured it out.

CESIUM_BASE_URL : JSON.stringify('')
now needs to be
CESIUM_BASE_URL : JSON.stringify('../')

Brought up on the forum here: https://groups.google.com/forum/#!topic/cesium-dev/t463ShjMtEI

The new Draco wasm file needs to be loaded using a wasm loader.

Additionally, glb files and other binary files need to be loaded using an appropriate binary loader as well. Since it's so common to load these into a Cesium app, they should be included here.

when I use files in 'cesium/build/Cesuim' or 'cesium/build/CesuimUnminified' to work with webpack, it reports errors like module not find. But it worked with files in 'cesium/Source', so I just want to know why and how to correctly import cesium files in production mode.

Can this allow me to use the latest version of cesium on nuxt2?

ESLint import plugin is very commonly used in medium/big size projects. Aliases should be configured so that cesium/* maps to node_modules/cesium/Source/* (as it's done for the Webpack config) and the import plugin ceases to return errors.
Are contributions accepted?

I ran into some issues attempting to follow the webpack example setup but got around it after tinkering with it a little:

• a few packages kept failing to compile, so I had to setup a fallback in my webpack.config.js including: stream-http, https-browserify, browserify-zlib, buffer/, url/, assert/, util/, and stream-browserify
• in the final index.js code, the modules createWorldTerrain() and createOsmBuildings() are deprecated, please update that to reflect the changes made with the latest version of 1.112.0; createWorldTerrainAsync() and createOsmBuildingsAsync() are the newly replaced modules

From CesiumGS/cesium#6610

In the cesium and webpack tutorial (https://cesiumjs.org/tutorials/cesium-and-webpack/), there is a section about code splitting which uses webpack.optimize.CommonsChunkPlugin.
However, in the new webpack 4 this has been deprecated, so you get this error:
ERROR Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

I can't seem to work out the correct syntax for using splitChunks with cesium, it would be very helpful to add this to the tutorial.

Is CESIUM_BASE_URL even still involved in worker setup and do they still need to be copied around?

Hi, this is a great resource along with the doc page https://cesiumjs.org/tutorials/cesium-and-webpack/ (which could be referenced from this repo readme, to be helpful), but it's out of date now.
I've spent the past day chasing my tail trying to get the latest cesium (1.49) to work with webpack 4, and vue.js. The docs and repo here are out of date and don't work, and while there are lots of helpful issues and posts around that hint at how to fix various issues, I've yet to hit on the magic combination that works.
This shouldn't be this difficult!
(but thanks for your great efforts so far)

Hi I'm getting these errors when trying to run a fresh install.

Cesium loads for a second or two, then these errors pop up in the console, and Cesium exits.

    140:80-87 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
     @ ./node_modules/cesium/Source/Core/TaskProcessor.js
     @ ./node_modules/cesium/Source/Core/QuantizedMeshTerrainData.js
     @ ./node_modules/cesium/Source/Core/CesiumTerrainProvider.js
     @ ./node_modules/cesium/Source/Cesium.js
     @ ./src/index.js
     @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
    
    WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js
    57:15-22 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
     @ ./node_modules/cesium/Source/Core/buildModuleUrl.js
     @ ./node_modules/cesium/Source/Cesium.js
     @ ./src/index.js
     @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
    
    WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js
    77:77-84 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
     @ ./node_modules/cesium/Source/Core/buildModuleUrl.js
     @ ./node_modules/cesium/Source/Cesium.js
     @ ./src/index.js
     @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

Hey! I "ported" this Cesium example to work with Vite instead of Webpack:
https://github.com/dustinmichels/cesium-vite-example

If you think it would be of interest to your users, feel free to publicize. Also feel free not to! 😄

@nmschulte brought up the following solution here:

CesiumGS/cesium#5816 (comment)

 new CopyWebpackPlugin([
        {from: path.join(paths.cesiumSource, 'Assets'), to: 'Assets'},
        {from: path.join(paths.cesiumSource, 'Widgets'), to: 'Widgets'},
        {from: path.join(paths.cesiumSource, 'ThirdParty'), to: 'ThirdParty'}
    ]), 
    new CopyWebpackPlugin([
        {from: path.join(paths.cesiumSource, '../Build/Cesium/ThirdParty/Workers'), to: 'ThirdParty/Workers'},
        {from: path.join(paths.cesiumSource, '../Build/Cesium/Workers'), to: 'Workers'}
    ])  

This update should be reflected in the tutorial as well.

CC CesiumGS/cesium#6670

webpack build includes polyfills for several node.js libraries – over 100kb minified which isn't left out of the browser build.

Can be configured: https://webpack.js.org/configuration/node/

The snippet at https://github.com/CesiumGS/cesium-webpack-example/blob/main/TUTORIAL.md#incorporate-cesiumjs-into-your-application still uses the old API.

Reported via https://community.cesium.com/t/error-while-rendering/30480

(This issue is just to have an item on my TODO list, I'll try to fix this soon)