Viewer is adding two cesium widgets in production why?

CesiumJS
1

Viewer is adding two cesium widgets in production why? Same below code works fine. But on production viewer adds two cesium widgets one is empty and the other one is showing required animation. Do we have to do any special configuration to run the code smoothly
code

import fullScreenWindow from “…/…/…/…/common/utils/fullScreenWindow”
import { Scene, ScreenSpaceCameraController, Viewer } from “resium”
import { CesiumTerrainProvider,Ion,SceneMode, createWorldTerrainAsync } from “cesium”;
import { clockViewModel } from “…/…/…/…/common/utils/cesiumDataHandler”;
import { useEffect, useState } from “react”;
Ion.defaultAccessToken =process.env.REACT_APP_CESIUMTOKEN;

const terrianProvider={data:null};
createWorldTerrainAsync().then((terrain)=>{
terrianProvider.data=terrain
}).catch((err)=>{
console.log(“Error in cesium comp”);
console.log(err);
});

const CesiumFlightPath3D = (props) =>{

// const [terrainProvider, setTerrainProvider] = useState(null);

// useEffect(() => {
//   const loadTerrain = async () => {
//     try {
//       const terrain = await createWorldTerrainAsync();
//       setTerrainProvider(terrain);
//       let ele=document.getElementById("viewer3d");
//       console.log(ele)
//       console.log("Got terrain");
//       console.log(terrain);
//     } catch (error) {
//       console.error("Error in cesium comp", error);
//       alert("Encountered an error while loading terrain tiles, invalid access token or no internet connection!");
//     }
//   };

//   loadTerrain();
// }, []); // E
return (
<>
    <div className={props.ispointerEventDisable ? 'h-100 w-100 pe-none' : 'h-100 w-100'} id="viewer3dWrap">
        
            <Viewer id="viewer3d" className="viewer"
                terrainProvider={ terrianProvider.data}
                defaultAccessToken={Ion}
                ref={e => {
                    if(e) {  console.log("REF called "); props.setViewer3D(e.cesiumElement)};
                }}
                clockViewModel={clockViewModel}
                sceneMode={SceneMode.SCENE3D}
                baseLayerPicker={false}
                vrButton={false}
                homeButton={false}
                sceneModePicker={false}
                projectionPicker={false}
                navigationHelpButton={false}
                animation={false}
                timeline={false}
                fullscreenButton={false}
                infoBox={false}
                geocoder={false}
                
                
                //changeSceneMode={props.ispointerEventDisable ? SceneMode.SCENE3D : SceneMode.SCENE2D}
            >
                {/* <Scene >
                    <ScreenSpaceCameraController   >
                    </ScreenSpaceCameraController>
                </Scene> */}
            </Viewer>

    </div>
</>
)

}

export default CesiumFlightPath3D;

Viwer shows a flight path and animation happens over time. Can anybody guide me

2

Hi there,

Could you explain the difference between your development and production environments?