Rendering error: Html received from server instead of JSON

CesiumJS
1

Hi,

Cesium is failing to render in the ‘production’ mode of my Vite-based React app (npm run build; npm run preview)

This is the popup message:

image
image313×282 9.83 KB

And these two are the exceptions I see in the console:

a)

VM87:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
    at JSON.parse (<anonymous>)
    at Resource.js:1180:17
(anonymous)	@	Resource.js:1180
Promise.then		
Resource.fetchJson	@	Resource.js:1176
Resource.fetchJson	@	Resource.js:1200
ApproximateTerrainHeights.initialize	@	ApproximateTerrainHeights.js:45
GroundPrimitive.initializeTerrainHeights	@	GroundPrimitive.js:672
DataSourceDisplay	@	DataSourceDisplay.js:44
CesiumWidget	@	CesiumWidget.js:432
Viewer	@	Viewer.js:476
...

b)

An error occurred while rendering.  Rendering has stopped.
InvalidStateError: The source image could not be decoded.
InvalidStateError: The source image could not be decoded.
overrideMethod	@	hook.js:608
CesiumWidget.showErrorPanel	@	CesiumWidget.js:962
CesiumWidget._onRenderError	@	CesiumWidget.js:420
Event.raiseEvent	@	Event.js:139
tryAndCatchError	@	Scene.js:4200
Scene.render	@	Scene.js:4290
CesiumWidget.render	@	CesiumWidget.js:1078
C	@	CesiumWidget.js:60
requestAnimationFrame		
C	@	CesiumWidget.js:61
requestAnimationFrame		
C	@	CesiumWidget.js:61
requestAnimationFrame		
C	@	CesiumWidget.js:61
requestAnimationFrame		
C	@	CesiumWidget.js:61
requestAnimationFrame		
startRenderLoop	@	CesiumWidget.js:87
set	@	CesiumWidget.js:742
CesiumWidget	@	CesiumWidget.js:408
Viewer	@	Viewer.js:476

What could possibly be causing HTML to be returned from the server when the expected response is JSON?

I’m using the latest Cesium version 1.129.0.

Interestingly, there are no compile-time or runtime issues in the dev mode (npm run dev). I assume Cesium should work with Vite, unless officially it’s known not to.

Regards,
/HS

2

Hi @HSimons,

Yes, Cesium should work with Vite. Have you looked at the cesium-vite-example repo?

I’m not familiar with Vite myself, but perhaps you could compare your setup to that example. ApproximateTerrainHeights reads from the Assets directory, so you may want to look at the note about hosting the required static files.

1 Like
3

Posting my resolution in case it’s helpful to anyone finding themselves with this problem:

My setup wasn’t answering to asset requests at /cesium/ correctly i.e.:

curl -s http://localhost:9000/cesium/Workers/createVerticesFromQuantizedTerrainMesh.js

Would return the SPA instead of the static asset.

For nginx, I had to edit the config to something like this:

server {

    ...

    location /cesium/ {
        try_files $uri =404;
        expires 1d;
        add_header Cache-Control "public, max-age=86400";
    }

    ...

}

Restart, try again, and confirm I was indeed getting the JS file instead of an HTML.

My vite.config.js also has this as part of the default return in order to populate that location with the correct assets at build time:

  return {

    // ...

    plugins: [
      react(),
      viteStaticCopy({
        targets: [
          {
            src: "node_modules/cesium/Build/Cesium/{Assets,ThirdParty,Workers,Widgets}/**/*",
            dest: "cesium",
            rename: { stripBase: 4 },
          },
        ],
      }),
    ],

    // ...

  }