# CZML Issues with NextJS 13

**URL:** <https://community.cesium.com/t/czml-issues-with-nextjs-13/28261>\
**Category:** CesiumJS\
**Created:** [November 22, 2023, 4:28pm UTC](https://community.cesium.com/t/czml-issues-with-nextjs-13/28261 "2023-11-22T16:28:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Garrett\_Hines](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/garrett_hines/32/19776_2.png) [@Garrett\_Hines](https://community.cesium.com/u/Garrett_Hines)\
**Post date:** [November 22, 2023, 4:28pm UTC](https://community.cesium.com/t/czml-issues-with-nextjs-13/28261/1 "2023-11-22T16:28:05Z")

</div>

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

```auto
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:

```auto
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:

```auto
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.