Debugging https://github.com/CesiumGS/cesium/issues/11769

createViewer.js

import { Viewer } from 'cesium'

const viewerOptions = {
  baseLayerPicker: true,
  sceneModePicker: false,
  scene3DOnly: true
}

// These arrays would be dynamically generated by requesting lists of assets from both sources and mapping them to ProviderViewModels
// These requests would be asynchronous and resolve at different times
const ionImagery = [/*Contains ProviderViewModels with `creationFunction: () => IonImageryProvider.fromAssetId(...)`*/]
const ionTerrain = [/*Contains ProviderViewModels with `creationFunction: () => CesiumTerrainProvider.fromIonAssetId(...)`*/]
const localImagery = [/*Contains ProviderViewModels with `creationFunction: () => URLImageryProvider(...)`*/]
const localTerrain = [/*Contains ProviderViewModels with `creationFunction: () => CesiumTerrainProvider.fromURL(...)`*/]

// We want to load cesium as soon as possible, so as soon as one of the requests is done loading, we create the viewer.
// Let's assume that our local assets were loaded first.
const viewer = new Viewer('viewer-container', {
  ...viewerOptions,
  imageryProviderViewModels: localImagery,
  terrainProviderViewModels: localTerrain
})

// Let's assume ION's assets were resolved a couple of seconds later. We'll add them to the viewer's picker.
setTimeout(() => {
  viewer.baseLayerPicker.viewModel.imageryProviderViewModels = ionImagery.concat(localImagery)
  viewer.baseLayerPicker.viewModel.terrainProviderViewModels = ionTerrain.concat(localTerrain)
}, 3000)

vite.config.js

// New config
// I removed some extraneous plugins and configurations that didn't pertain to cesium.

import path from 'node:path'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import { defineConfig } from 'vite'
import { buildModuleUrl } from 'cesium'
import vue from '@vitejs/plugin-vue'

const cesiumSource = './node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
buildModuleUrl.setBaseUrl(path.resolve(__dirname, 'dist/Assets'))

export default defineConfig(() => {
  return {
    plugins: [
      vue(),
      viteStaticCopy({
        targets: [
          { src: path.join(cesiumSource, cesiumWorkers), dest: '.' },
          { src: path.join(cesiumSource, 'ThirdParty'), dest: '.' },
          { src: path.join(cesiumSource, 'Assets'), dest: '.' },
          { src: path.join(cesiumSource, 'Widgets'), dest: '.' }
        ]
      })
    ],
    define: {
      CESIUM_BASE_URL: JSON.stringify('')
    }
  }
})

vue.config.js

// Old config
// I removed some extraneous plugins and configurations that didn't pertain to cesium.

const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const { buildModuleUrl } = require('cesium')

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
buildModuleUrl.setBaseUrl(path.resolve(__dirname, 'dist/Assets'))

module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist'),

      // Needed to compile multiline strings in Cesium
      sourcePrefix: ''
    },
    plugins: [
      new CopywebpackPlugin({
        // Copy Cesium Assets, Widgets, and Workers to a static directory
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
          { from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }
        ]
      }),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify(''),
      })
    ]
  }
}