Cesium 1.63 breaks Vue/Web-pack application

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)

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

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?

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.

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.

1 Like

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

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!

1 Like

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