1.问题遇到的现象和发生背景

我在将ruoyi的前端将其作为注册为qiankun的主应用，一个开源的react应用注册为一个qiankun的子应用时出现如下报错：

图中，我已经成功将子应用嵌入到主应用中，但是他还是说我没有暴露生命钩子。

vue应用主体开源项目地址：https://gitee.com/y_project/RuoYi-Cloud/tree/master/ruoyi-ui

react开源项目主体：https://github.com/mckaywrigley/chatbot-ui

这是本人对于前段微应用的研究，并不涉及到商用，非公司内部代码

我在其中加入了调整：

对于vue微应用主体：

在main.js中：

// 加载qiankun插件：
import { registerMicroApps, start } from 'qiankun';
//加入微服务：
// 注册子应用
registerMicroApps([
  {
    name: 'chat-gpt-ui', // 子应用名称，唯一标识
    entry: '//localhost:3001/zh', // 子应用的入口地址
    container: '#chat-gpt-ui', // 子应用挂载的容器，即它将被插入的DOM元素选择器
    activeRule: '/ai/gpt', // 子应用激活的路由规则，当路由满足此规则时，子应用将被激活
    loader: (loading) => {
      console.log('Loading', loading);
    },
    props: {
      testProp: 'Test',
    },
  },
]);

// 启动 qiankun
start({
  prefetch: 'all',
  sandbox: { experimentalStyleIsolation: true },
});

应用的vue组件：

<template>
    <div>
      <h1>GPT测试页面</h1>
      <!-- 其他代码 -->
      <div id="chat-gpt-ui"></div>
    </div>
</template>

react子应用调整如下：

在根目录下新建：qiankunLifecycle.js

内容如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './pages/_app';

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
    console.log('react app bootstraped');
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
    ReactDOM.render(<App />, props.container ? props.container.querySelector('#chat-gpt-ui') : document.getElementById('chat-gpt-ui'));
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
    ReactDOM.unmountComponentAtNode(
        props.container ? props.container.querySelector('#chat-gpt-ui') : document.getElementById('chat-gpt-ui'),
    );
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
    console.log('update props', props);
}

在生命钩子暴露在app中：_app.tsx

const { i18n } = require('./next-i18next.config');
const packageName = require('./package.json').name;
const webpack = require('webpack');

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n,
  reactStrictMode: true,

  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: '*', // 根据需要设置允许的域，'*' 表示允许所有域
          },
          {
            key: 'Access-Control-Allow-Methods',
            value: 'GET, POST, PUT, DELETE, OPTIONS',
          },
          {
            key: 'Access-Control-Allow-Headers',
            value: 'Content-Type, Authorization, X-Requested-With',
          },
        ],
      },
    ];
  },

  // 添加这个配置
  async rewrites() {
    return [
      {
        source: '/qiankun',
        destination: './pages/_app',
      },
    ];
  },

  webpack(config, { isServer, dev }) {
    config.plugins.push(
        new webpack.DefinePlugin({
          __WEBPACK_OUTPUT_LIBRARY_NAME__: JSON.stringify('chat-gpt-ui'),
          __WEBPACK_OUTPUT_LIBRARY_TYPE__: JSON.stringify('umd'),
          __WEBPACK_CHUNK_LOADING_GLOBAL__: JSON.stringify(`webpackJsonp_chat-gpt-ui`),
        })
    );
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };

    return config;
  },
};

module.exports = nextConfig;

2.我的解答思路和尝试过的方法

我怀疑是webpack的问题，我曾经写成为：

config.output = {
…config.output,
publicPath: getPublicPath(),
library: ${packageName}-[name],
libraryTarget: ‘umd’,
chunkLoadingGlobal: webpackJsonp_${packageName},
};

因为官网说 jsonpFunction的已经在webpack5.0中摈弃了，但是这样会报错：

ReferenceError: path is not defined
at Object.webpack (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\next.config.js:66:18)
at Object.getBaseWebpackConfig [as default] (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\build\webpack-config.js:1463:32)
at async Promise.all (index 0)
at async Span.traceAsyncFn (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\trace\trace.js:79:20)
at async Span.traceAsyncFn (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\trace\trace.js:79:20)
at async HotReloader.start (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\server\dev\hot-reloader.js:406:30)
at async DevServer.prepare (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\server\dev\next-dev-server.js:613:9)
at async D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\cli\next-dev.js:585:17

D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui>npm install @hot-loader/react-dom --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: chat-gpt-ui@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@“18.2.0” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@“17.0.2” from @hot-loader/react-dom@17.0.2
npm ERR! node_modules/@hot-loader/react-dom
npm ERR! @hot-loader/react-dom@“*” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\GoLw\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\GoLw\AppData\Local\npm-cache_logs\2023-05-07T10_14_25_372Z-debug-0.log

上述调整是我咨询chatGPT之后做的

3.我想要达到的结果

1，ruoyi存储的认证和cookie能够共用也就是，我希望Chatbot UI能够共享ruoyi的前端认证，我希望他的请求都能交给我的ruoyi后端处理

从抓包结果来看貌似成功了：

只是路径啥要调整一下

2，我希望能够解决这个没有暴露钩子的异常问题

麻烦老师了