Cesium 1.63 breaks Vue/Web-pack application

CesiumJS
1

Hello all,

I am working on a project combining Vue with Cesium. To make one thing clear from the start - I don’t understand webpack - It is just useful black magic!

I don’t expect any instant help, but for me it looks like something is odd with this Cesium Release and want to create a entry in case any other person has similar issues. I check the change log but I did not find anything that relates to my issue. I will just wait for the next Cesium Update to check if the problem remains and give an update.

In case someone with more knowledge then me has an Idea what I should try to do or what specific information you need I will do what I can.

1. A concise explanation of the problem you’re experiencing.

  • After updating to 1.63.0 I get Color TypeErrors (See Screenshot) after a successful “vue serve”
  • I believe the whole Cesium Reference is missing because nothing of my webpage is not loading anymore
  • I tested my code with different commites and npm packages. It is definitely the updated from 1.62.0 - 1.63.0 that breaks my webpage

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

  • Not sure how or if I can reproduce this outside a vue-cli / vuetify / cesium project so I did not try yet. (I will start deeper investigation if 1.64 also breaks)
  • I attached my vue.config.js and package.json
  • I set up my project using this post: https://www.jianshu.com/p/fb237c7eb48c

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

  • Why I need this: Vue & vuetify & vue-cli are just awesome - what else should I say :confused:
  • Potential other ways: I did not check for vuejs - cesium integrations for the last 6 months. So far my current setup worked very well.

4. The Cesium version you’re using, your operating system and browser.

  • I started with this project with **Cesium 1.49.0 **and applied each Cesium Update. Cesium 1.63.0 is the first update that breaks my webpage.
  • Version 76.0.3809.100 (Developer Build) built on Debian 10.0, running on Debian 10.1 (64-bit)

Thanks to everyone for your work on Cesium. I hope my information might help, in case it is really an error.

Best wishes,

Gerhard

webpack-Cesium-Type-Error.png

vue.config.js.txt (1.25 KB)

package.json.txt (1.31 KB)

1 Like
2

This is presumably somehow due to Cesium being migrated to ES Modules:

3

Can you show how you’re using Cesium in your app? For example, can you post the code you’re using right for (1) importing Cesium and then (2) initializing the viewer?

4

Ohhh - yeah did not see this. Now I am feeling stupid :/. I will check this and also provide some more samples or how I fixed it.
Thanks a lot.

5

Of course I can add a little bit more code. I might set up a complete fresh vue-cli project this weekend. I am currently working in my app and I believe it is an issue with the initial import with webpack in combination with tree-shacking.

I am using the vue-cli with vuex & vue-router.

(1) Import Cesium in main.js // store.js

import Cesium from ‘cesium/Cesium’

import widget from ‘cesium/Widgets/widgets.css’ //eslint-disable-line

(2) initializing the viewer

The cesium-div is within a vue-component

a vuex action is call on creation of the vue component:

CesiumViewer.vue

created() {

this.$store.dispatch(“aCsInit”).then(() => {…

});

},

store.js

aCsInit({ commit }) {

commit(‘mInteractionReset’);

return new Promise((resolve, reject) => {

setTimeout(() => {

commit(‘mCsInit’)

resolve()

}, 10)

})

},

mCsInit(state) {

let viewerData = { //eslint-disable-line

…

…

imageryProvider: Cesium.createTileMapServiceImageryProvider({

url: Cesium.buildModuleUrl(‘Assets/Textures/NaturalEarthII’)

}),

};

let viewer = new Cesium.Viewer(‘cesiumContainer’, viewerData);

…

}

Thats more or less it. The rest can be done using the viewer object and Cesium.XYZ calls within actions/mutation in the vue app.

After using the

import { Color } from ‘cesium/Cesium’

and renaming.

now Cesium.createTileMapServiceImageryProvider (…)

causing an error.

As I mentioned before I don’t have much knowledge about JavaScript build process.

I don’t really understand jet why I sometimes get the modules behind Cesium. and when not. (See screenshot)

I will check potential cesium-vue integration this weekend. As mentioned before I did not look into some for a few month. But in case anyone has a good working solution I clad for the help :slight_smile:

You can see an early alpha of my app with Cesium (1.62.0) & Vue here: https://worldtrix.com/

I will provide an update how i solved this.

Thanks.

Webpack_module_chrome.png
Webpack_module_chrome.png695×198 23.1 KB

1 Like
6

Hello everyone,

I took the time and I setup the vue, vuex, vue-router, vuetify and cesium with configuration above. It seems to work and looks like I have an issue with all the other imports / webpack configuration.

You can find the configuration on github.

https://github.com/meschg/vue-stack-cesium

I can invite to to the repository if someone has a better way of setting up cesium with vue or improve the webpack configuration.

Looks like the cesium team did an awesome job with the ES6 migration :). I will now try to get this running with typescript.

Best wishes,

Gerhard

2 Likes
7

thank very much.it is importent for me that how do config cesium@1.73 baseing vue.I have solved this problem through your ‘vue.config.js’ in https://github.com/meschg/vue-stack-cesium .I think it is importent load this loader(strip-pragma-loader) in module.rules and config the path in plugins.I should pay more attention in the path(Workers,Assets,Widgets,ThirdParty). so ,thank you very much! best withes for you!

2 Likes
8

Hey, no problem took me a lot of time to set this up and though some one else would probably be glad for the help :slight_smile:

1 Like