Cesium Viewer component is broken

sameervk commented 6 days ago

What happened?

Hi,

I am a new comer to Cesium. I have been learning CesiumJS with NextJS and ReactJS for more than a month now. The Viewer component loaded via useEffect was working fine until yesterday where it's rendering is breaking into multiple components.

Before it was:

And since yesterday:

I tested on different browsers - Chrome, Firefox and Brave - but same issue.

To test the issue was not confined to development only, I deployed a production server on vercel but same issue.

Between one day to the next, nothing changed. So I am expecting it is the Viewer widget returned that has.

Thank you Sameer

Reproduction steps

The framework I am using is NextJS version
Package.json: { "name": "nextjs-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@heroicons/react": "^2.1.4", "@next/env": "^14.2.14", "cesium": "1.123.1", "clsx": "^2.1.1", "copy-webpack-plugin": "^12.0.2", "next": "15.0.3", "react": "18.3.1", "react-bootstrap": "^2.10.5", "react-dom": "18.3.1", "zod": "^3.23.8" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.7", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" } }
On the main landing page: calling CesiumViewer (after setting Ion.defaultAccessToken) with the following code

` useEffect(() => {

  const viewer = new Viewer('CesiumContainer', {
  terrain: Terrain.fromWorldTerrain(),
});

  viewer.camera.flyTo({
    destination: Cartesian3.fromDegrees(longitude, latitude, elevation)
  });

} ` ...

Sandcastle example

No response

Environment

Browser: Chrome 130.0.6723.116 CesiumJS Version: 1.123.1 Operating System: Ubuntu 22.04.5 LTS

ggetz commented 4 days ago

Hi @sameervk, I'm not clear on how viewer initialization is affected by useEffect. Would you be able to reproduce a minimal example without React?

sameervk commented 4 days ago

Hi @ggetz, yeah, I have been trying to figure out and the issue is that I did not import widgets.css file which cause it to breakdown. The confusion was that in the previous one where the Viewer rendered correctly, the widgets.css file was imported in a different file which I was not using. Anyways, closing this issue. Thank you,

CesiumGS / cesium