Microfrontend implementation where the host is Vue and the remote component is React

44 Views Asked by At

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?

sources of the host application on github...

sources of the remote application on github...

0

There are 0 best solutions below