Cesium vs @cesium/engine

CesiumJS
1

Hi,

I’m encountering some unusual behavior when switching from cesium to @cesium/engine.

have a Geographic Feature:

JSON

{
“type”: “FeatureCollection”,
“links”: ,
“features”: [
{
“type”: “Feature”,
“id”: 1,
“geometry”: {
“type”: “Polygon”,
“coordinates”: [
[
[
-79.548234403,
43.793161804,
158.354254891
],
[
-79.548592696,
43.793109236,
158.37599932
],
[
-79.548593397,
43.793084352,
158.326724229
],
[
-79.54824387,
43.793133919,
158.395472057
],
[
-79.548234403,
43.793161804,
158.354254891
]
]
]
},
“properties”: {
“og_obj_id”: 1,
“aim_create_date_time”: “2025.08.14 09:38:16”,
“aim_last_mod_date_time”: “2025.08.14 09:38:16”,
“aim_verify_date_time”: “”,
“aim_verify_user”: “”,
“aim_verify_status”: “”
}
},
{
“type”: “Feature”,
“id”: 2,
“geometry”: {
“type”: “Polygon”,
“coordinates”: [
[
[
-79.548593397,
43.793084352,
158.326724228
],
[
-79.548539171,
43.792821542,
158.069174023
],
[
-79.548572401,
43.792823616,
158.074062104
],
[
-79.548624199,
43.793069383,
158.27932031
],
[
-79.548593397,
43.793084352,
158.326724228
]
]
]
},
“properties”: {
“og_obj_id”: 2,
“aim_create_date_time”: “2025.08.14 09:38:34”,
“aim_last_mod_date_time”: “2025.08.14 09:38:41”,
“aim_verify_date_time”: “”,
“aim_verify_user”: “”,
“aim_verify_status”: “”
}
}
],
“numberMatched”: 2,
“numberReturned”: 2
}

and after changing the package, that part stops working completely—no errors, no output, nothing happens:

const dataSource = await Cesium.GeoJsonDataSource.load(...); // ✅ Works
await viewer.dataSources.add(dataSource); // ✅ Works
await viewer.zoomTo(dataSource); // ❌ no errors, no output, no return, nothing happens
2

Hi @Gabriel.Miranda,

Thanks for your post. I cannot quite verify form the limited code you provided, but the issue may be that you do not have the Viewer class imported correctly when you switched from using “all in one” cesium to “package level” cesium (eg @cesium/engine).

In the package level distributions of CesiumJS, some classes are in @cesium/engine and others in @cesium/widgets. Viewer is part of widgets.

I cannot be sure from what you shared that this is the problem, but this is my initial hunch.

The solution would be to install @cesium/widgets in your project, and import Viewer from it.

If this is not the solution please let us know and we would be happy to assist more.
Thanks,
Luke

3

hello @Luke_McKinstry,

I decided to use @cesium/engine because it’s a smaller package and requires less CSP configuration (it doesn’t require unsafe-eval).

Another detail worth mentioning is that I’m using CesiumWidget instead of the Viewer.

4

Thanks @Gabriel.Miranda for those additional details

I tried plugging in your code using CesiumWidget instead of Viewer but was unable to reproduce the error you described, but this may not be a valid reproduction attempt since I am importing from top level Cesium instead of “@cesium/engine”

5

I also amended a version of this demo project GitHub - CesiumGS/cesium-vite-example: The minimal recommended setup for an application using Cesium with Vite.

  • Changed cesium dependency to @cesium/engine
    • Note, I left cesium in the project for the css import import "cesium/Build/Cesium/Widgets/widgets.css";
  • Changed Viewer import to CesiumWidget

but I was similarly not able to reproduce it.

import { Terrain, GeoJsonDataSource, CesiumWidget } from "@cesium/engine";
import "cesium/Build/Cesium/Widgets/widgets.css";
import "./style.css";

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new CesiumWidget("cesiumContainer", {
  terrain: Terrain.fromWorldTerrain(),
});

const dataSource = await GeoJsonDataSource.load("./src/sample2.geojson", {
  clampToGround: true,
}); // ✅ Works
await viewer.dataSources.add(dataSource); // ✅ Works
await viewer.zoomTo(dataSource); //

Please let us know if you have more insight into how we might reproduce the error you encountered.

Thanks,
Luke

6

Thanks for trying to replicate my error. Since you still have cesium installed/configured, it is still being used. What I suggest changing to reproduce my scenario:

  1. CSS import
    According to the @cesium/engine documentation, the CSS is imported from a different folder: @cesium/engine/Source/Widget/CesiumWidget.css

  2. Build folder
    cesium and @cesium/engine have different Build folders:

    cesium:

    • /ThirdParty
    • /Workers
    • /Assets
    • /Widgets

    @cesium/engine:

    • /ThirdParty
    • /Workers

  3. Because of this, you need to:

  • Clean your public/cesiumStatic folder
  • Remove cesium from package.json
  • Inside vite.config.js:
    • Modify cesiumSource to node_modules/@cesium/engine/Build
    • Remove the copy of /Assets and /Widgets (since they don’t exist in @cesium/engine)

Remember to:

  • update your import in the main.js file
  • use CesiumWidget instead of Viewer
  • I had to add skyBox: false in the viwerer creation to prevent an error

This way I was able to reproduce my scenario with the repo code.

7

Thanks for pointing out I had not removed all the settings and imports for “top level” Cesium to reflect this app which is using @cesium/engine.

The readme for the Cesium Vite Example has this section showing modifications needed to swap in @cesium/engine for cesium: GitHub - CesiumGS/cesium-vite-example: The minimal recommended setup for an application using Cesium with Vite.

vite.config.js

viteStaticCopy({
  targets: [
    { src: 'node_modules/@cesium/engine/Build/Workers', dest: cesiumBaseUrl },
    { src: 'node_modules/@cesium/engine/Build/ThirdParty', dest: cesiumBaseUrl },
    { src: 'node_modules/@cesium/engine/Source/Assets', dest: cesiumBaseUrl },
  ],
}),

src/main.js

// Change this import
import "cesium/Build/Cesium/Widgets/widgets.css";

// To this one from the cesium/engine package
import "@cesium/engine/Source/Widget/CesiumWidget.css";

After doing these changes, making sure @cesium/engine and not the other packages (cesium & @cesium/widgets) are installed … the dataSource loads into the scene fine and I cannot reproduce the error described :see_no_evil_monkey:.

Let me know what you find. Also, what is your build system? Are you using vite or a different setup?

8

You found the solution: { src: 'node_modules/@cesium/engine/Source/Assets', dest: cesiumBaseUrl },

If you notice in my example, I was only copying the Build folder from cesium.

However, it’s also necessary to copy the Assets folder from the Source directory. After doing that, everything is working correctly.

Issue resolved! Thank you very much.