@cesium/engine and @cesium/widgets with vite

CesiumJS
1

Hi all,

I am trying to get @cesium/engine and @cesium/widgets running with Vite. So far, I don’t get any error messages, but 3D tiles and terrain are not displayed at all (although the data is being fetched). My vite.config.js looks like this:

import { defineConfig } from "vite";
import { viteStaticCopy } from "vite-plugin-static-copy";

const cesiumBaseUrl = "cesiumStatic";

export default defineConfig({
  base: "./",
  define: {
    CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
  },
   plugins: [
            viteStaticCopy({
                targets: [
                    { src: `node_modules/@cesium/engine/Source/Assets`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/Core`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/Renderer`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/Scene`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/Shaders`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/ThirdParty`, dest: cesiumBaseUrl },
                    { src: `node_modules/@cesium/engine/Source/Workers`, dest: cesiumBaseUrl },

                    { src: `node_modules/@cesium/widgets/Source`, dest: cesiumBaseUrl },
                ],
            })
        ]
});

Does anyone know how to solve this problem? I’d like to build Cesium myself so that I have control over things like tree-shaking, compression, etc.

Thanks in advance.

Best regards

Frustum Geometry working with Craco but not with Vite, Please Guide if someone has faced same situation?
2

Hi there,

Do you see any errors in the developer console? Any 404’s in particular?

3

Did you set your personal Cesium Ion token ?

You can have a look at demo-cesium-widget…

Note: I’m the author of vite-plugin-cesium-engine

4

Thank you both for your responses, and I apologize for my delayed reply.

@Gabby_Getz I encountered some errors related to loading files in the workers folder. These issues were resolved after setting node_modules/.vite/deps as my cesiumBaseUrl. Previously, some worker files couldn’t be loaded, which led to follow-up errors from Resource.js. However, these problems ceased once I adjusted the cesiumBaseUrl.

@jerome.fayot , I tried both approaches: running a project without a Cesium ion token (since I host terrain and 3D tiles myself) and a clean project set up as follows:

import { Viewer } from '@cesium/widgets';
import { Ion, Cartesian3, Terrain } from '@cesium/engine';

Ion.defaultAccessToken = "myAccessToken";
const viewer = new Viewer('cesiumContainer', {
  terrain: Terrain.fromWorldTerrain(),
});

In both projects, I do not receive any errors. However, no terrain or 3D tiles are being loaded, although my instanced 3D tiles v1.1 do load successfully.

5

I am facing 3DTileset loading issue with Vite config while same 3DTileset working fine with Craco , Guide me if i am configuring it wrong and i am adding the link of my post

6

Try to use Cesium Plugin instead of manaually setup , here is my vite.config.mjs file for your reference and second thing keep in mind if you are migrating from Craco to Vite , you have to proxy the server path , as in my config

import { defineConfig, loadEnv } from ‘vite’;

import react from ‘@vitejs/plugin-react’;

import cesium from “vite-plugin-cesium”;

export default defineConfig(({ command, mode }) => {

// Load env file based on `mode` in the current working directory

const env = loadEnv(mode, process.cwd(), ‘’);

return {

plugins: [

react({

include: [‘**/*.jsx’, ‘**/*.js’, ‘**/*.tsx’, ‘**/*.ts’],

babel: {

plugins: [

        \['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }\]

      \]

    }

  }),

cesium(),

\],

server: {

proxy: {

‘/api’: env.VITE_PORT_API_KEY,

‘/tilesets’: env.VITE_PORT_API_KEY

  },

},

resolve: {

alias: {

‘@’: ‘/src’,

  },

},

optimizeDeps: {

exclude: [‘react-virtualized’],

include: [‘prop-types’],

},

build: {

assetsInlineLimit: 0,

commonjsOptions: {

include: [/react-virtualized/, /node_modules/],

  },

chunkSizeWarningLimit: 1600,

},

};

});