vite.config.ts with optimizeDeps

[vlkpa]

Hi, I’m trying to integrate react-native-web with Cesium and Vite, dependencies in react-native needs optimizeDeps becouse of this error: [ERROR] The JSX syntax extension is not currently enabled The esbuild loader for this file is currently set to “js” but it must be set to “jsx” to be able to parse JSX syntax.

When I try to use vite-plugin-cesium-build with optimizeDeps I can see only black screen, any suggestions how to use vite-plugin-cesium-build with optimizeDeps ?

This is my vite.config.ts:

import {defineConfig} from 'vite';
import cesium from 'vite-plugin-cesium-build';

const extensions = [
  '.mjs',
  '.web.tsx',
  '.tsx',
  '.web.ts',
  '.ts',
  '.web.jsx',
  '.jsx',
  '.web.js',
  '.js',
  '.css',
  '.json',
];

export default defineConfig({
  define: {
    global: 'window',
    __DEV__: 'true',
  },

  resolve: {
    extensions,
    alias: [
      {find: 'react-native', replacement: 'react-native-web'},
    ],
  },
  plugins: [cesium()],
  optimizeDeps: {
    esbuildOptions: {
      resolveExtensions: extensions,
      loader: {
        '.js': 'jsx',
      },
    },
  },
  server: {
    port: 3000,
    host: 'localhost',
  },
});

This is main.js:

import React from 'react';
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

const app = document.querySelector('#root');

const viewer = new Cesium.Viewer(app);

viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(120, 31.8, 100000),
});

[s3xysteak]

Add the following code in main.jsx:

Object.defineProperty(globalThis, 'CESIUM_BASE_URL', {
  value: '/cesium-package/' // Same as options 'to'
})

I haven't used React before, so it took me some time to learn it. I created a React application using pnpm create vite and found that the issue still lies with CESIUM_BASE_URL. The plugin automatically adds the code to set CESIUM_BASE_URL in main.js or main.ts. In fact, I have already mentioned this issue in the README, but I have to admit that it is not a satisfactory solution. I hope to improve it in the next version.

And here is my code used in the test app:

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

import cesium from 'vite-plugin-cesium-build'

export default defineConfig({
  plugins: [react(), cesium({
    customCesiumBaseUrl: true // Set `True` to set CESIUM_BASE_URL by yourself
  })]
})

// App.jsx
import { useRef, useEffect } from 'react'

import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

function App() {
  const container = useRef(null)

  useEffect(() => {
    const viewer = new Cesium.Viewer(container.current)

    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(120, 31.8, 100000)
    })

    return () => viewer.destroy()
  })

  return (
    <>
      <div ref={container} style={{ width: '100vw', height: '100vh' }}></div>
    </>
  )
}

export default App

[s3xysteak]

I will find a better solution to automatically add CESIUM_BASE_URL .

[vlkpa]

Thank you it helped.

[s3xysteak]

Since version 0.2.1, CESIUM_BASE_URL will be set in index.html, which should provide the best compatibility. @vlkpa You can update the plugin, and it should work correctly without any additional configuration. If any other errors occur, you can still use the above solution.

[vlkpa]

Since version 0.2.1, CESIUM_BASE_URL will be set in index.html, which should provide the best compatibility. @vlkpa You can update the plugin, and it should work correctly without any additional configuration. If any other errors occur, you can still use the above solution.

Thank you I can confirm that after the update it works without additional configuration.

[keul]

@s3xysteak may I suggest you to add this react solution to your readme, or somewhere in the documentation, etc? This comment made my day.

The official Cesium wrapper library only works with webpack (and a lot of painful changes) but I'm pretty sure there are a lot of people that would love to use vite+React+Cesium

[s3xysteak]

@s3xysteak may I suggest you to add this react solution to your readme, or somewhere in the documentation, etc? This comment made my day.

The official Cesium wrapper library only works with webpack (and a lot of painful changes) but I'm pretty sure there are a lot of people that would love to use vite+React+Cesium

Actually there is no need to follow the solution in this issue now. Now you just need to install this plugin, and call it in the plugins option in Vite.

import { defineConfig } from 'vite'
import cesium from 'vite-plugin-cesium-build'

export default defineConfig({
  plugins: [
    //...
    cesium()
  ]
})

But you may be right. I consider making some mini-examples in the repo.

[s3xysteak]

@keul I add examples of vanilla/vue/react/preact/solid/svelte, which was metioned in README. Hope it will be helpful.