Issue: Remote Component Fails to Render When Using Slots (Vue3 + Vite + Module Federation)
Closed this issue · 1 comments
neversleeppy commented
Description
When loading a remote Vue component containing slots via Module Federation, the component fails to render. Console shows error:
TypeError: Cannot read properties of null (reading 'ce')

Steps to Reproduce
- Configure a remote app to expose a component with slots, e.g.:
<template>
<!-- remote -->
<button
style="
border: 0 solid #e2e8f0;
margin-top: 10px;
background-color: rgb(246, 179, 82);
border-radius: 0.25rem;
font-weight: 700;
padding: 0.5rem 1rem 0.5rem 1rem;
color: rgb(24, 24, 24);
"
@click="store.increment"
>
Remote counter: {{ count }}
<p>
<p>this is slot</p>
<slot></slot>
</p>
</button>
</template>- use the component in host application
<script setup lang="ts">
import { defineAsyncComponent } from "vue";
import Counter from "./components/Counter.vue";
const RemoteMFE = defineAsyncComponent(
// @ts-ignore
() => import("remote/remote-app")
);
</script>
<template>
<RemoteMFE v-if="!!RemoteMFE" />
</template>Reproduction Repo
https://github.com/[neversleeppy/mf-vite-slot](https://github.com/neversleeppy/mf-vite-slot)
Environment
Framework: Vue3 + Vite
Module Federation: "@module-federation/vite": "1.2.5",
ScriptedAlchemy commented
all vite issues shuld be logged with the module-federation/vite repo
