SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

I keep on getting this error when i load cesium in my react web page "SyntaxError: Unexpected token ‘<’, "<!DOCTYPE “… is not valid JSON”. I am new to Cesium JS. I have followed all the tutorials and some issues but i can not sem to solve. This is my code at the moment. Please help me see what ii could be ding wrong
import { useEffect, useRef } from “react”;
import “cesium/Build/Cesium/Widgets/widgets.css”;
import * as Cesium from “cesium”;

function CityGMLViewer() {
const cesiumContainerRef = useRef(null);
const newBuildingTilesetRef = useRef(null); // Store the new building tileset for later use

useEffect(() => {
const script = document.createElement(“script”);
script.src = “https://cesium.com/downloads/cesiumjs/releases/1.126/Build/Cesium/Cesium.js”;
script.async = true;

script.onload = () => {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "https://cesium.com/downloads/cesiumjs/releases/1.126/Build/Cesium/Widgets/widgets.css";
  document.head.appendChild(link);

  const style = document.createElement("style");
  style.innerHTML = `
    #toggle-building { z-index: 1; position: fixed; top: 5px; left: 5px; }
  `;
  document.head.appendChild(style);

  // Your access token from Cesium Ion
  Cesium.Ion.defaultAccessToken = 'mytoken';

  // Initialize the viewer with Cesium World Terrain
  const viewer = new Cesium.Viewer(cesiumContainerRef.current, {
    terrain: Cesium.Terrain.fromWorldTerrain(),
  });

  // Add Cesium OSM Buildings and GeoJSON
  const loadBuildings = async () => {
    try {
      const buildingsTileset = await Cesium.createOsmBuildingsAsync();
      viewer.scene.primitives.add(buildingsTileset);

      // Load GeoJSON
      const geoJSONURL = await Cesium.IonResource.fromAssetId('3097182');
      const geoJSON = await Cesium.GeoJsonDataSource.load(geoJSONURL, { clampToGround: true });
      const dataSource = await viewer.dataSources.add(geoJSON);

      for (const entity of dataSource.entities.values) {
        entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
      }

      // Hide specific buildings
      buildingsTileset.style = new Cesium.Cesium3DTileStyle({
        show: {
          conditions: [
            ['${elementId} === 588791919', false],
            ['${elementId} === 419899272', false],
            ['${elementId} === 27230506', false],
            ['${elementId} === 341646730', false],
            [true, true]
          ]
        },
        color: "Boolean(${feature['cesium#color']}) ? color(${feature['cesium#color']}) : color('#ffffff')"
      });

      // Add a new building tileset from Cesium Ion
      const newBuildingTileset = await Cesium.Cesium3DTileset.fromIonAssetId('3097182');
      viewer.scene.primitives.add(newBuildingTileset);
      viewer.flyTo(newBuildingTileset);
      newBuildingTilesetRef.current = newBuildingTileset;  // Store for later use

    } catch (error) {
      console.error("Error loading resources:", error);
    }
  };

  loadBuildings();

  return () => {
    // Cleanup Cesium resources when component unmounts
    if (viewer) {
      viewer.destroy();
    }
  };
};

document.body.appendChild(script);

return () => {
  // Cleanup the script in case of component unmount
  document.body.removeChild(script);
};

}, );

useEffect(() => {
// Attach event listener for the toggle button
const toggleButton = document.querySelector(“#toggle-building”);
if (toggleButton && newBuildingTilesetRef.current) {
toggleButton.onclick = () => {
const newBuildingTileset = newBuildingTilesetRef.current;
if (newBuildingTileset) {
newBuildingTileset.show = !newBuildingTileset.show;
}
};
}
}, [newBuildingTilesetRef.current]); // Only run when newBuildingTilesetRef changes

return (


<div id=“cesiumContainer” ref={cesiumContainerRef} style={{ height: “100vh” }}>

Toggle new building

);
}

export default CityGMLViewer;

Hi @Gloria_Kiawa,
Thanks for your note and welcome to the Cesium community. I am sorry you are running into problems getting your project up and running.

Is you primary goal to bring Cesium into a React application? Or to roll your own React component wrapping Cesium?

If it’s the former, Resium https://resium.reearth.io/ is a widely used library that I suggest checking out.

If your primary goal is creating your own components from scratch, please let us know some more information about your specific goals and we can also try to help.

Thanks again for trying out Cesium and hope you are up and running soon.
Best,
Luke