I am trying to make a microfrontend application where the host is implemented in Vue and the remote component is implemented in React.
I use vite and Module Federation (vite-plugin-federation).
host application
App.vue:
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ReactDOMServer from 'react-dom/server'
const componentHtml = ref()
onMounted(
async () =>
(componentHtml.value = ReactDOMServer.renderToString((await import('home/Home')).default()))
)
</script>
<template>
<div v-html="componentHtml"></div>
</template>
vite.config.ts:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
federation({
name: 'layout',
filename: 'remoteEntry.js',
remotes: {
home: 'http://localhost:4173/assets/remoteEntry.js'
}
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
remote application
App.jsx:
//import { useState } from "react";
export default function App() {
// const [value] = useState("react");
return <div>react</div>;
}
vite.config.js:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
federation({
name: "home",
filename: "remoteEntry.js",
exposes: {
"./Home": "./src/App.jsx",
},
}),
],
});
In this form, the program works. But as soon as we start using useState.
import { useState } from "react";
export default function App() {
const [value] = useState("react");
return <div>{value}</div>;
}
There's an error:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'useState')
Found a not-so-encouraging link...
Has anyone encountered a similar problem? Is it solvable at the moment?