Cesium not building properly in React

CesiumJS
1

image
image1887×2030 275 KB

When trying to build cesium in react, it seems as though the styling is off. I got it working yesterday but suddenly it looked like this. Can anyone point me in the right direction to get this to work? The cesium component code looks like this:

import React from 'react';
import { Viewer, Entity } from "resium";
import { Cartesian3 } from "cesium";
window.CESIUM_BASE_URL = '/Cesium';

class Editor3D extends React.Component {    
    render() {
        return (
            <Viewer full>
                <Entity
                    name="tokyo"
                    position={Cartesian3.fromDegrees(139.767052, 35.681167, 100)}
                    point={{ pixelSize: 10 }}>
                    test
                </Entity>
            </Viewer>
        );
    }
}
export default Editor3D;
2

Do you have any network or console errors in your browser? It looks like it’s failing to load the CSS. Make sure you’re importing the CSS. One way to do that is with:

import "cesium/Build/Cesium/Widgets/widgets.css";
2 Likes
3

Thank you, just import

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

into main.tsx and it’s working at React 18 :grinning: