fix: 解决react应用热重载导致主应用挂掉的问题

main/src/micro-app.js

@@ -7,13 +7,16 @@ const microApps = [
     props: {
       routerBase: '/sub-vue'
     }
+  },
+  {
+    name: 'sub-react',
+    entry: '//localhost:7788/',
+    activeRule: '/sub-react',
+    container: '#subapp-viewport', // 子应用挂载的div
+    props: {
+      routerBase: '/sub-react'
+    }
   }
-  // {
-  //   name: 'subapp2',
-  //   entry: '//localhost:7788/',
-  //   activeRule: '/subapp2',
-  //   container: '#subapp-viewport'
-  // }
 ]
 
 export default microApps

sub-react/config-overrides.js

@@ -1,14 +1,18 @@
-const { name } = require('./package');
+const { name } = require('./package.json');
+console.log(name)
 
 module.exports = {
   webpack: function override(config, env) {
-    const copyConfig = { ...config };
-    copyConfig.output.library = `${name}-[name]`;
-    copyConfig.output.libraryTarget = 'umd';
-    copyConfig.output.jsonpFunction = `webpackJsonp_${name}`;
+    config.entry = config.entry.filter(
+      (e) => !e.includes('webpackHotDevClient')
+    );
+
+    config.output.library = `${name}-[name]`;
+    config.output.libraryTarget = 'umd';
+    config.output.jsonpFunction = `webpackJsonp_${name}`;
     return config;
   },
-  devServer: function (configFunction) {
+  devServer: (configFunction) => {
     return function (proxy, allowedHost) {
       const config = configFunction(proxy, allowedHost);
       config.open = false;

sub-react/src/index.js

@@ -1,23 +1,24 @@
+import './public-path'
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
 
 
 
+function render() {
+  ReactDOM.render(
+    <App />,
+    document.getElementById('root')
+  );
+}
+
+if (!window.__POWERED_BY_QIANKUN__) {
+  render();
+}
 /**
  * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
  * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
@@ -30,17 +31,22 @@ export async function bootstrap() {
  */
 export async function mount(props) {
   console.log(props);
-  ReactDOM.render(<App />, document.getElementById('react15Root'));
+  render();
 }
 /**
  * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
  */
 export async function unmount() {
-  ReactDOM.unmountComponentAtNode(document.getElementById('react15Root'));
+  ReactDOM.unmountComponentAtNode(document.getElementById('root'));
 }
 /**
  * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
  */
 export async function update(props) {
   console.log('update props', props);
 }
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();

sub-react/src/public-path.js

@@ -0,0 +1,4 @@
+if (window.__POWERED_BY_QIANKUN__) {
+  // eslint-disable-next-line
+  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
+}