Cesium causing failure on Vue + Vite Ubuntu environment

CesiumJS
1

I created a simple vue + vite app then installed cesium. However, importing cesium is causing my project to be unable to run without errorring out. I am running on Ubuntu 22.04

To recreate, I created a new project using

yarn create vite my-vue-app --template vue
cd my-vue-app
yarn add cesium vite-plugin-cesium vite -D

Then updated the vite config to utilize vite-plugin-cesium:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), cesium()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

In HelloWorld.vue, I imported cesium using either import * as Cesium from 'cesium' or import { Viewer } from 'cesium'.

Then running yarn dev give me the error:

✘ [ERROR] Failed to resolve entry for package "https". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]

    node_modules/esbuild/lib/main.js:1373:21:
      1373 │         let result = await callback({
           ╵                      ^

    at packageEntryFailure (file:///home/andrea/projects/test/my-vue-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:28725:11)
    at resolvePackageEntry (file:///home/andrea/projects/test/my-vue-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:28722:5)
    at tryNodeResolve (file:///home/andrea/projects/test/my-vue-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:28453:20)
    at Context.resolveId (file:///home/andrea/projects/test/my-vue-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:28212:28)
    at Object.resolveId (file:///home/andrea/projects/test/my-vue-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44276:64)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async file:///home/andrea/projects/test/my-vue-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:65922:21
    at async file:///home/andrea/projects/test/my-vue-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:39976:34
    at async requestCallbacks.on-resolve (/home/andrea/projects/test/my-vue-app/node_modules/esbuild/lib/main.js:1373:22)
    at async handleRequest (/home/andrea/projects/test/my-vue-app/node_modules/esbuild/lib/main.js:729:13)


  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1292:20:
      1292 │       let promise = setup({
           ╵                     ^

    at setup (file:///home/andrea/projects/test/my-vue-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:39956:19)
    at handlePlugins (/home/andrea/projects/test/my-vue-app/node_modules/esbuild/lib/main.js:1292:21)
    at buildOrContextImpl (/home/andrea/projects/test/my-vue-app/node_modules/esbuild/lib/main.js:978:5)
    at Object.buildOrContext (/home/andrea/projects/test/my-vue-app/node_modules/esbuild/lib/main.js:786:5)
    at /home/andrea/projects/test/my-vue-app/node_modules/esbuild/lib/main.js:2186:68
    at new Promise (<anonymous>)
    at Object.context (/home/andrea/projects/test/my-vue-app/node_modules/esbuild/lib/main.js:2186:27)
    at Object.context (/home/andrea/projects/test/my-vue-app/node_modules/esbuild/lib/main.js:2026:58)
    at prepareEsbuildOptimizerRun (file:///home/andrea/projects/test/my-vue-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:46041:35)

  The plugin "vite:dep-pre-bundle" was triggered by this import

    node_modules/@cesium/engine/Source/Core/Resource.js:2076:48:
      2076 │       return URL.protocol === "https:" ? import("https") : import("http");
           ╵                                                 ~~~~~~~

Any ideas of what the issue is that is causing this error would be appreciated. Thank you

2

If you’re building from source, it helps to mark the following packages as “external”:

“https”,
“http”,
“url”,
“zlib”

These are packages which exist in an NodeJS environment, but not in a browser environment.