Cesium3DTileSet zoomTo throwing error while rendering cesium viewer

CesiumJS
1 
An error occurred while rendering.  Rendering has stopped.
TypeError: Cannot read properties of undefined (reading 'updateTransform')
TypeError: Cannot read properties of undefined (reading 'updateTransform')
    at Cesium3DTileset.get (http://localhost:3000/static/js/bundle.js:281370:18)
    at updateZoomTarget (http://localhost:3000/static/js/bundle.js:457546:33)
    at Viewer._postRender (http://localhost:3000/static/js/bundle.js:457485:3)
    at Event.raiseEvent (http://localhost:3000/static/js/bundle.js:145523:20)
    at Scene.render (http://localhost:3000/static/js/bundle.js:388090:22)
    at CesiumWidget.render (http://localhost:3000/static/js/bundle.js:440037:17)
    at render (http://localhost:3000/static/js/bundle.js:439275:18)

I’m using zoomTo in 3DTiles to focus on the point cloud being loaded,

this.viewer.timeline.zoomTo(currentTime, endTime);
this.viewer.zoomTo(tileset);

When I remove the second line, the above error goes away and does not render the viewer. Does anyone have any idea about this? I pulled a new project and I have a feeling that this has something to do with Cesium version being incompatible.

2

Hi there, could you please provide a minimal code snippet we could use to reproduce the error? Sandcastle is a helpful tool for this.

3 
  import { Cesium3DTileset, Cesium3DTileStyle, JulianDate } from 'cesium';

  loadData(tiles3dDataUrl) {
    const tileset = new Cesium3DTileset({ 
      url: tiles3dDataUrl
    });

    tileset.style = new Cesium3DTileStyle({
        color: this.colorCalc(),
        pointSize: 5.0
      });

    var currentTime = JulianDate.fromIso8601("2005-10-09T17:54:00Z")
    var endTime = JulianDate.fromIso8601("2005-10-09T23:59:00Z");

    this.viewer.clock.currentTime = currentTime;
    this.viewer.clock.multiplier = 10;

    this.viewer.scene.primitives.add(tileset);

    this.viewer.timeline.zoomTo(currentTime, endTime);
    this.viewer.zoomTo(tileset);
  }

Initializing viewer with,

    this.viewer = new Viewer("cesiumContainer", {
      shouldAnimate: false,
      useBrowserRecommendedResolution: true,
      selectedImageryProviderViewModel: new ProviderViewModel({
          name: "Bing Maps Aerial with Labels",
          iconUrl: buildModuleUrl("Widgets/Images/ImageryProviders/bingAerialLabels.png"),
          tooltip: "Bing Maps aerial imagery with labels, provided by Cesium ion",
          category: "Cesium ion",
          creationFunction: function () {
            return createWorldImageryAsync({
              style: IonWorldImageryStyle.AERIAL_WITH_LABELS,
            })
          },
        })
    });

I’m using the following dependencies,

  "@craco/craco": "^6.4.5",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.3",
    "@mui/material": "^5.14.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "cesium": "^1.96.0",
    "jsona": "^1.11.0",
    "moment": "^2.29.4",
    "node-polyfill-webpack-plugin": "^3.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "temporal-3d-tile": "^1.0.1",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"

Adding this in case this has something to do with dependencies or their versions.