ReferenceError: define is not defined (ver: 1.102.0)

CesiumJS
1

Screenshot_20231107_185511
Screenshot_20231107_1855111520×919 63.9 KB

Without changes or updates, cesium no longer loads the globe (sky still loads). The application is using Svelte, Vite and TypeScript, please find a snippet from package.json below

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.9",
    "@tsconfig/svelte": "^3.0.0",
    "svelte": "^3.52.0",
    "svelte-check": "^2.9.2",
    "svelte-preprocess": "^4.10.7",
    "tslib": "^2.4.0",
    "typescript": "^4.8.4",
    "vite": "^3.1.8"
  },
  "dependencies": {
    "cesium": "^1.102.0"
  }


Errors Recieved:

“ReferenceError: define is not defined”

  • createVerticesFromHeightmap.js:1:1
  • decodeDraco.js:1:1

Screenshot_20231107_185011
Screenshot_20231107_185011703×44 8.1 KB



Solutions tried 
  // Offline basemap - https://github.com/CesiumGS/cesium/tree/main/Documentation/OfflineGuide - https://sandcastle.cesium.com/index.html?src=Offline.html&label=Beginner
  
  const offlineBase = Cesium.ImageryLayer.fromProviderAsync(
    Cesium.TileMapServiceImageryProvider.fromUrl(
      Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
    ),
    {} // https://cesium.com/learn/cesiumjs/ref-doc/ImageryProvider.html
  );
  • Loading a tileset
    // Add Photorealistic 3D Tiles - https://sandcastle.cesium.com/?src=Google%20Photorealistic%203D%20Tiles.html
    
    try {
      const tileset = await Cesium.createGooglePhotorealistic3DTileset();
      viewer.scene.primitives.add(tileset);
    } catch (error) {
      console.log(`Error loading Photorealistic 3D Tiles tileset.
  ${error}`);
    }
  });
  • Creating a provider view model
    // Create an empty array - http://www.phpmind.com/blog/2015/09/cesiumjs-how-to-set-default-imagelayer/
    
    var providerViewModel = [];

    providerViewModel.push(
      // Push details about an image provider
      new Cesium.ProviderViewModel({
        name: "Open Street Map",
        iconUrl: Cesium.buildModuleUrl(
          "Widgets/Images/ImageryProviders/openStreetMap.png"
        ),
        tooltip:
          "OpenStreetMap (OSM) is a collaborative project to create a free editable map \
of the world.\nhttp://www.openstreetmap.org",
        category: "Cesium ion",
        creationFunction: function () {
          return Cesium.createWorldImageryAsync({
            style: Cesium.IonWorldImageryStyle.AERIAL,
          });
        },
      })
    );
    
        viewer = new Viewer("cesiumContainer", {
     
      // IMAGE PROVIDER
      imageryProviderViewModels: providerViewModel, // Declare where to look for image providers
      selectedImageryProviderViewModel: providerViewModel[0], // Selected this one

      // UI
      animation: false, //Show animation controls
      baseLayerPicker: false, //Show base layer picker
      fullscreenButton: false,
      vrButton: false,
      geocoder: false, //Show location search
      homeButton: false,
      infoBox: false,
      sceneModePicker: false, //Show scene mode picker
      selectionIndicator: false,
      timeline: false, //Show Timeline
      navigationHelpButton: false,

      // EFFECTS?
      shouldAnimate: true, // Animation on by default
      scene3DOnly: true,
      requestRenderMode: true, // Only render on request from entity, reduces CPU usage
      maximumRenderTimeChange: Infinity, //Time in with a new frame is requested, depending on simulation time changes. (Set to a high value, such as Infinity, if no elements in your scene change with simulation time)
    });
  • Declaring the cesium types in tsconfig.app.json
{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Svelte",
  "_version": "3.0.0",
  "compilerOptions": {
    /** 
      https://community.cesium.com/t/cesium-type-definitions-for-typescript/24738/4
      **/
    "types": [
      "cesium"
    ],
    "moduleResolution": "node",
    "target": "es2017",
    "useDefineForClassFields": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "verbatimModuleSyntax": true,
    /**
        To have warnings/errors of the Svelte compiler at the correct position,
        enable source maps by default.
       */
    "sourceMap": true,
    "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    /**
       * Typecheck JS in `.svelte` and `.js` files by default.
       * Disable checkJs if you'd like to use dynamic types in JS.
       * Note that setting allowJs false does not prevent the use
       * of JS in `.svelte` files.
       */
    "allowJs": true,
    "checkJs": true
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.svelte"
  ]
}

Any help would be greatly appreciated, thanks

2

Hi there,

It looks like there is an issue loading the Workers. These are files that are shipped with CesiumJS which run asynchronous tasks outside of the main thread.

I’m not deeply familiar with vite, but GitHub - nshen/vite-plugin-cesium: ⚡ Vite plugin for Cesium is a community maintained plugin which users have has success with in the past.