s3xysteak / vite-plugin-cesium-build

A devDependencies used to automatically configure CesiumJS for development and build with Vite.
MIT License
18 stars 2 forks source link

Trouble running on Linux #8

Open LilDinker opened 2 months ago

LilDinker commented 2 months ago

Hello. I am trying to deploy my website onto a Linux VM (Redhat 8). The website works as expected when run locally on my Windows machine, but deploying to Linux has made an issue I resolved previously resurface. I can't quite confirm that this is an issue with vite-plugin-cesium-build or cesium-use, but I am fairly confident it is one or the other. Specifically, when I run my vite application, I get:

Cesium.js:1 Uncaught SyntaxError: Unexpected token '<' (at Cesium.js:1:1)

cesium-use.js?v=54bcb6f0:763 Uncaught TypeError: Cannot read properties of undefined (reading 'WHITE')
    at cesium-use.js?v=54bcb6f0:763:20

I believe that the second error is caused by the first, and its due to the fact that Cesium is not being bundled properly and HTML is being referenced where it shouldn't be. I saw this on Windows a few weeks ago, and I fixed it by changing my vite/typescript configuration settings, specifically my module and moduleResolution:

Here is my tsconfig.app.json:

{
    "compilerOptions": {
      "composite": true,
      "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
      "target": "ES2020",
      "useDefineForClassFields": true,
      "module": "ESNext",
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
      "skipLibCheck": true,

      /* Bundler mode */
      "moduleResolution": "bundler",
      "allowImportingTsExtensions": true,
      "resolveJsonModule": true,
      "isolatedModules": true,
      "moduleDetection": "force",
      "noEmit": true,
      "jsx": "preserve",

      /* Linting */
      "strict": false,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noFallthroughCasesInSwitch": true
    },
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
  }

Here is my tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noEmit": true
  },
  "include": ["vite.config.mts"]
}

Here is my tsconfig.json:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

And here it my vite.config.m.ts:

import Components from "unplugin-vue-components/vite";
import Vue from "@vitejs/plugin-vue";
import Vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
import ViteFonts from "unplugin-fonts/vite";
import AutoImport from "unplugin-auto-import/vite";
import cesium from "vite-plugin-cesium-build";
import CesiumUseResolver from "cesium-use/resolver";

// Utilities
import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Vue({
      template: { transformAssetUrls },
    }),
    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
    Vuetify(),
    Components(),
    ViteFonts({
      google: {
        families: [
          {
            name: "Roboto",
            styles: "wght@100;300;400;500;700;900",
          },
        ],
      },
    }),
    AutoImport({
      resolvers: [CesiumUseResolver()],
    }),
    cesium(),
  ],
  define: { "process.env": {} },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
    extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
  },
  server: {
    port: 3000,
  },
});

I have tried changing the "module" and "moduleResolution" values to a few others and have had no success. Other than that I am kind of stumped. Do you have any idea or insight on how to fix? Here is my npm list, if that helps:

├── @fortawesome/fontawesome-free@6.5.2
├── @fortawesome/fontawesome-svg-core@6.5.2
├── @fortawesome/free-solid-svg-icons@6.5.2
├── @fortawesome/vue-fontawesome@3.0.6
├── @mdi/font@6.2.95
├── @types/cesium@1.70.0
├── @types/jquery@3.5.30
├── @types/node@20.12.6
├── @vitejs/plugin-vue@5.1.0
├── cesium-use@0.13.8
├── cesium@1.119.0
├── concurrently@8.2.2
├── http-server@14.1.1
├── pinia@2.1.7
├── roboto-fontface@0.10.0
├── sass@1.74.1
├── typescript@5.5.4
├── unplugin-auto-import@0.18.2
├── unplugin-fonts@1.1.1
├── unplugin-vue-components@0.26.0
├── vite-plugin-cesium-build@0.4.3
├── vite-plugin-vuetify@2.0.3
├── vite@5.3.5
├── vue-router@4.4.0
├── vue-tsc@2.0.29
├── vue@3.4.34
├── vuedraggable@4.1.0
├── vuetify@3.5.14
└── ws@8.17.1

and I am running on Node version 20.11.0.

Thank you in advance for any help you can provide!

s3xysteak commented 2 months ago

The website works as expected when run locally on my Windows machine, but deploying to Linux has made an issue I resolved previously resurface.

I don't think the difference of OS will cause the problem. Guess the issue is caused by the difference between production and development. Could you try vite build and vite preview, then confirm that it happened in production?

Here is a check list:

  1. Check dist/cesium-package to confirm the statics and Cesium.js were copied correctly.

  2. Could you show me your index.html? The problem may be about setBaseUrl and importCesium.