Packing a Cesium project as a NPM

CesiumJS
1

Hey,
I’m trying to pack the cesium+react+typescript+vite+resium project (Let’s call it project A) and use it as a package (npm) in project B ($~proj/B npm i A).
In project B I’ve got the following error: “Uncaught ReferenceError: Cesium is not defined at @B”.

Here are the configuration files of Project A:
vite.config.ts

/// <reference types="vite/client" />

import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import cesium from 'vite-plugin-cesium';
// import dts from "vite-plugin-dts";
// import typescript from '@rollup/plugin-typescript';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    cesium(),
    // typescript(),
    // dts({
    //   rollupTypes: true,
    //   exclude: ["./src/env.d.ts"],
    // })
  ],
  build: {
    lib: {
      formats: ['es', 'umd'],
      entry: resolve(__dirname, 'src/index.tsx'),
      name: 'index',
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["cesium", "react", "react-dom"],
      output: {
        globals: {
          cesium: "Cesium",
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
  },
});

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "rootDir": "src",
    "sourceMap": true,
    "outDir": "./dist",
    "declaration": true,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "downlevelIteration": true,

    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  },
  "include": [
    "src"
  ]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

package.json

{
  "name": "@proj/A",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "main": "./dist/index.umd.js",
  "module": "./dist/index.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.umd.js"
    }
  },
  "files": [
    "dist/",
    "src/",
    "!src/**/*.test.ts"
  ],
  "scripts": {
    "dev": "vite --port 3000",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview --port 3000"
  },
  "dependencies": {
    ...
    "cesium": "^1.106.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "resium": "^1.16.1"
  },
  "devDependencies": {
    ...
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@rollup/plugin-typescript": "^11.1.5",
    "@testing-library/jest-dom": "^6.1.2",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.5.4"
    "@types/react": "^18.2.12",
    "@types/react-dom": "^18.2.5"
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "tslib": "^2.6.2",
    "typescript": "^4.9.5",
    "vite": "^5.0.8",
    "vite-plugin-cesium": "^1.2.22",
    "vite-plugin-dts": "^3.6.4"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

The main.tsx of Project B:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { MapStateProvider, MapViewer } from '@proj/A';
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <MapStateProvider><MapViewer style={{ height: "80vh"}}></MapViewer></MapStateProvider>
  </React.StrictMode>,
)
2

Finally, I’ve found the solution in resium, and in vite-plugin-cesium

In short: if we need to use the project as a components library, in the “vite” option we need to pay attention to “vite-plugin-cesium” argument as follows:

cesium({
      rebuildCesium: true // <--
})
1 Like