Fixed import

package.json

@@ -21,8 +21,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.3",
-    "tailwindcss": "^3.4.1",
-    "vite-plugin-single-spa": "^0.6.1"
+    "single-spa": "^6.0.1",
+    "single-spa-react": "^6.0.1",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@types/node": "^20.11.16",
@@ -37,6 +38,7 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "prettier": "^2.7.1",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-single-spa": "^0.6.1"
   }
 }

src/spa.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOMClient from 'react-dom/client';
+import singleSpaReact from 'single-spa-react';
+import App from './App';
+import { cssLifecycleFactory } from 'vite-plugin-single-spa/ex';
+
+const lc = singleSpaReact({
+  React,
+  ReactDOMClient,
+  rootComponent: App,
+  errorBoundary(err: any, _info: any, _props: any) {
+    return <div>Error: {err}</div>;
+  },
+});
+// IMPORTANT:  Because the file is named spa.tsx, the string 'spa'
+// must be passed to the call to cssLifecycleFactory.
+const cssLc = cssLifecycleFactory('spa');
+export const bootstrap = [cssLc.bootstrap, lc.bootstrap];
+export const mount = [cssLc.mount, lc.mount];
+export const unmount = [cssLc.unmount, lc.unmount];

vite.config.ts

@@ -8,7 +8,9 @@ export default defineConfig({
   plugins: [
     react(),
     vitePluginSingleSpa({
-      type: 'root',
+      type: 'mife',
+      serverPort: 80,
+      spaEntryPoints: 'src/spa.tsx',
     }),
   ],
   define: {