Cesium 1.63 breaks Vue/Web-pack application

[mes...@gmail.com]

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 :/
• 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

[Mark Erikson]

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

https://cesium.com/blog/2019/10/31/cesiumjs-es6/

[Omar Shehata]

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?

[mes...@gmail.com]

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.

[mes...@gmail.com]

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 :)

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.

[mes...@gmail.com]

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