Cesium crashing in versions after 1.54.0. "Cannot read property length of undefined" at getCornerFromEdge.

CesiumJS
1

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

I am experiencing crashes on Cesium immediately after pan/tilt/zoom the map after load. I am using create-react-app with cesium (installed using npm). “Cannot read property length of undefined” at getCornerFromEdge.

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

componentDidMount() {

var rec = [103.6, 1.22, 104.05, 1.46];

var boundingRectangle = Rectangle.fromDegrees(rec[0], rec[1], rec[2], rec[3]);

Camera.DEFAULT_VIEW_FACTOR = 0;

Camera.DEFAULT_VIEW_RECTANGLE = boundingRectangle;

var viewer = new Viewer(this.cesiumContainer, {

imageryProvider: mapservices.mapbox_provider, // using new MapboxImageryProvider({ mapId: ‘mapbox.streets’, accessToken: <my_access_token’ });

baseLayerPicker: false,

vrButton: false,

geocoder: false,

animation: true,

timeline: true,

scene3DOnly: true,

selectionIndicator: true,

        shouldAnimate : false

});

}

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

N.A.

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

The same code works in versions before 1.54.0. I tried with a few cesium versions after 1.54.0 and they all crashed.

cesium_error.PNG
cesium_error.PNG1615×564 181 KB

2

Can you try it with the latest version 1.61 to confirm if it’s still an issue there?

Were you able to reproduce this issue on Sandcastle (https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html) ?

3

Hi,

I wasn’t able to reproduce this error on Sandcastle, code below. I have tried version 1.61 and I still encounter the error. I did notice that the TerrainFillMesh.js wasn’t present in version 1.54.0.

var rec = [103.6, 1.22, 104.05, 1.46];
var boundingRectangle = Cesium.Rectangle.fromDegrees(rec[0], rec[1], rec[2], rec[3]);
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = boundingRectangle;

var viewer = new Cesium.Viewer(‘cesiumContainer’, {
imageryProvider: new Cesium.MapboxImageryProvider({
mapId: ‘mapbox.streets’,
accessToken: <mapbox_access_token>
}),
baseLayerPicker: false,
vrButton: false,
geocoder: false,
animation: true,
timeline: true,
scene3DOnly: true,
selectionIndicator: true,
shouldAnimate : false
});

``

Any advice on what I can do or where I can start looking for the problem?

4

Hi,

I have found the problem. It appears that to use create-react-app with cesium properly, each time I update to a new version of cesium, I will need to copy the Cesium Source to the public folder (it is not automatic) and add the following to index.js:

import “cesium/Source/Widgets/widgets.css”;

import buildModuleUrl from “cesium/Source/Core/buildModuleUrl”;

buildModuleUrl.setBaseUrl(’./cesium/’);

When I update the Cesium version using npm install cesium@1.61, I will need to copy the Cesium Source folder again and rename it as cesium.

Thanks.

5

Thanks for digging into this and posting your solution! This will definitely help others running into this.

We are also planning on switching the CesiumJS source code to use ES6 modules, which I think might reduce this type of build problems: https://github.com/AnalyticalGraphicsInc/cesium/issues/8122