module-federation/module-federation-examples

Issue: Remote Component Fails to Render When Using Slots (Vue3 + Vite + Module Federation)

Closed this issue · 1 comments

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')
Image

Image

Steps to Reproduce

  1. 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>
  1. 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",

all vite issues shuld be logged with the module-federation/vite repo