single-spa 开发环境 vite 子项目报错

single-spa 原理

vite 原理

详见

vite+vue 作为基座引入 vite+react 开发环境报错

问题描述

在使用 vite+vue 作为基座项目时，引入 vite+react 子项目是会出现报错： Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201

报错信息

问题原因

single-spa 的本质就是把子项目的 js 拿到基座中使用，而由于 vite 的机制，开发环境下的入口文件是未被完全转换为 js 的 main.tsx，基座应用运行时会创建本地服务器用于处理这个文件，但基座应用中无法对 react 项目文件进行解析，这里只要在基座应用中添加对 react 代码的处理就可以了

解决方法

引入 react 项目 vite 插件

pnpm install @vitejs/plugin-react --save-dev

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import VueDevTools from 'vite-plugin-vue-devtools';

// 引入react项目vite插件
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx(), VueDevTools(), react()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});