CZML Issues with NextJS 13

CesiumJS
1

I have a NextJS 14 React app and integrating with cesium. I load in some CZML and it doesn’t always render even though it’s the exact same CZML doc. Usually, loads fine on the first load and then any refresh is a toss up whether it loads or not. For reference the CZML doc contains a bunch of polygons. I am currently using cesium:1.111.0. My nextjs config looks like

const CopyWebpackPlugin = require('copy-webpack-plugin');

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'standalone',
    webpack: (config, {isServer, webpack}) => {
        if (!isServer) {
            config.plugins = [
                ...config.plugins,
                // Copy the requisite Cesium files for static hosting
                new CopyWebpackPlugin({
                    patterns: [
                        { from: './node_modules/cesium/Build/Cesium/Assets', to: 'static/cesium/Assets' },
                        { from: './node_modules/cesium/Build/Cesium/ThirdParty', to: 'static/cesium/ThirdParty' },
                        { from: './node_modules/cesium/Build/Cesium/Widgets', to: 'static/cesium/Widgets' },
                        { from: './node_modules/cesium/Build/Cesium/Workers', to: 'static/cesium/Workers' }
                    ]
                }),
                // Set the base URL for accessing the Cesium static files
                new webpack.DefinePlugin({
                    CESIUM_BASE_URL: JSON.stringify("_next/static/cesium")
                })
            ];
         
        }

        return config;
    }
};

module.exports = nextConfig;

Cesium viewer is setup like:

viewer.current = new Viewer(cesiumViewerRef.current, {
    baseLayerPicker: false,
    sceneModePicker: false,
    sceneMode: SceneMode.SCENE2D,
    shouldAnimate: true,
    geocoder: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    mapMode2D: MapMode2D.ROTATE,
    homeButton: false,
    fullscreenButton: false
});

// Unsure why this is needed, but without loading in a data-source here with a polygon, loading one in later is not rendered
const czml = [
    {
        "id": "document",
        "name": "Heatmap",
        "version": "1.0"
    },
    {
        "id": "examplePolygon",
        "polygon": {
          "positions": {
            "cartographicDegrees": [
              -75.0, 40.0, 0.0,
              -80.0, 40.0, 0.0,
              -80.0, 35.0, 0.0,
              -75.0, 35.0, 0.0
            ]
          },
          "material": {
            "solidColor": {
              "color": {
                "rgba": [255, 0, 0, 0]
              }
            }
          }
        }
    }
]
//viewer.current.dataSources.add(Cesium.CzmlDataSource.load(czml));
Cesium.CzmlDataSource.load(czml).then(ds => {
    viewer.current?.dataSources.add(ds);
    czmlDataSource.current = ds;
});

and then also listening on a web socket for updates:

websocket.on<Array<object>>("heatmap", (data: Array<object>) => czmlDataSource.current?.load(data));

Note: that if the initial polygon renders then all the web socket updates render as expected. If the initial polgons does not render then no udpates render either. No errors from any of the promises. Wonder if there is some race condition or caching that I’m not seeing.