子应用 Ant design message 组件样式丢失

[yiluzhang]

问题描述

子应用 ant design message 组件样式丢失无法，正常显示。

上传截图

环境信息

• micro-app版本：1.0.0-rc.5
• 主应用前端框架&版本："vue": "^2.6.14", "element-ui": "^2.15.12"
• 子应用前端框架&版本："vite": "^5.2.8", "react": "^18.2.0", "antd": "^5.16.1"

[yiluzhang]

Modal, Drawer, Notification, Tooltip 等弹出式组件均正常展示。

[github-actions[bot]]

Hello @yiluzhang. In order to facilitate location and troubleshooting, we need you to provide a realistic GitHub repository. 您好 @yiluzhang, 为了方便定位和排查问题，我们需要您提供一个重现实例，请提供一个尽可能精简的 GitHub 仓库地址。

[yiluzhang]

Hello @yiluzhang. In order to facilitate location and troubleshooting, we need you to provide a realistic GitHub repository. 您好 @yiluzhang, 为了方便定位和排查问题，我们需要您提供一个重现实例，请提供一个尽可能精简的 GitHub 仓库地址。

问题出在路由系统非 pure 模式时，子应用独自进行了路由跳转，导致 message 组件可能不显示

主应用

import Vue from 'vue'
import App from './App.vue'
import microApp from "@micro-zoe/micro-app";

microApp.start();

new Vue({
  render: h => h(App),
}).$mount('#app')

// App.vue
<template>
  <micro-app iframe name="subsys" url="http://localhost:5173/subsys" />
</template>

子应用

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import { ConfigProvider, message } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { Outlet, RouterProvider, createBrowserRouter, useNavigate } from 'react-router-dom';

let root: ReactDOM.Root;

function Page() {
  useEffect(() => {
    setTimeout(() => message.info('tip..'), 10);
  }, []);

  return <h3>刷新看看</h3>;
}

function Root() {
  const navigate = useNavigate();

  useEffect(() => {
    navigate('/subsys/page');
  }, []);

  return (
    <ConfigProvider locale={zhCN}>
      <Outlet />
    </ConfigProvider>
  );
}

const router = createBrowserRouter([
  {
    path: '/subsys',
    element: <Root />,
    children: [
      {
        path: 'page',
        element: <Page />,
      },
    ],
  },
]);

function mount() {
  root = ReactDOM.createRoot(document.getElementById('root')!);
  root.render(
    <React.StrictMode>
      <RouterProvider router={router} />
    </React.StrictMode>,
  );
}

if (window.__MICRO_APP_ENVIRONMENT__) {
  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount: () => root.unmount() };
} else {
  mount();
}

[github-actions[bot]]

Since the issue was labeled with Need Reproduction, but no response in 7 days. This issue will be close. If you have any questions, you can comment and reply. 由于该 issue 被标记为需要可复现步骤，却 7 天未收到回应。现关闭 issue，若有任何问题，可评论回复。

[yiluzhang]

Since the issue was labeled with Need Reproduction, but no response in 7 days. This issue will be close. If you have any questions, you can comment and reply. 由于该 issue 被标记为需要可复现步骤，却 7 天未收到回应。现关闭 issue，若有任何问题，可评论回复。

@bailicangdu 问题被自动关闭，请问我提供的复现代码无法复现问题吗？