学习中心
登录
qiankun报错:react没有暴露子应用生命周期hook
答疑问诊
来源: MCA高级架构师
预约 05月09日 14:00-14:59

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

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

3795aec7229a24147c9c5d087641cacd.png

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

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后端处理

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

只是路径啥要调整一下

a9ac0d9a3044594c93ba1224f3c043d2.png

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

麻烦老师了

何景文
2023-05-07 20:03:44
60
5

李强与学员的交流

该提问还没有回答,等待老师回复中~

回答老师

离线

擅长技术:
向TA提问