diff --git a/docs/faq/README.md b/docs/faq/README.md index 2e58153..38a9f63 100644 --- a/docs/faq/README.md +++ b/docs/faq/README.md @@ -30,7 +30,26 @@ To solve the exception, try the following steps: 6. If the development environment is OK but the production environment is not, check whether the `index.html` and `entry js` of the micro app are returned normally, for example, `404.html` is returned. -7. If you're using webpack5, please see [here](https://github.com/umijs/qiankun/issues/1092) If it still not works after the steps above, this is usually due to browser compatibility issues. Try to **set the webpack `output.library` of the broken sub app the same with your main app registration for your app**, such as: +7. If you're using webpack5, please see [here](https://github.com/umijs/qiankun/issues/1092) + +8. Check whether the main app and micro-app use AMD or CommonJS. Check method: run the main app and the micro-app independently, and enter the following code in the console: `(typeof exports === 'object' && typeof module === 'object') || (typeof define === 'function' && define.amd) || typeof exports === 'object'`,If it returns `true`,that it is caused by this reason, and there are mainly the following two solutions: + + - Solution 1: Modify the `libraryTarget` of the micro-app `webpack` to `'window'`. + + ```diff + const packageName = require('./package.json').name; + module.exports = { + output: { + library: `${packageName}-[name]`, + - libraryTarget: 'umd', + + libraryTarget: 'window', + jsonpFunction: `webpackJsonp_${packageName}`, + }, + }; + ``` + - Solution 2: The micro-app is not bundle with `umd`, directly mount the life cycle function to the `window` in the entry file, refer to[Micro app built without webpack](/guide/tutorial#micro-app-built-without-webpack). + +9. If it still not works after the steps above, this is usually due to browser compatibility issues. Try to **set the webpack `output.library` of the broken sub app the same with your main app registration for your app**, such as: Such as here is the main configuration: diff --git a/docs/faq/README.zh.md b/docs/faq/README.zh.md index 1c3d677..fb50100 100644 --- a/docs/faq/README.zh.md +++ b/docs/faq/README.zh.md @@ -30,9 +30,27 @@ qiankun 抛出这个错误是因为无法从微应用的 entry js 中识别出 6. 如果开发环境可以,生产环境不行,检查微应用的 `index.html` 和 `entry js` 是否正常返回,比如说返回了 `404.html`。 -7. 如果你正在使用 webpack5,请看[这个 issues](https://github.com/umijs/qiankun/issues/1092) +7. 如果你正在使用 webpack5,请看[这个 issues](https://github.com/umijs/qiankun/issues/1092)。 -如果在上述步骤完成后仍有问题,通常说明是浏览器兼容性问题导致的。可以尝试 **将有问题的微应用的 webpack `output.library` 配置成跟主应用中注册的 `name` 字段一致**,如: +8. 检查主应用和微应用是否使用了 AMD 或 CommonJS 模块化。检查方法:单独运行微应用和主应用,在控制台输入如下代码:`(typeof exports === 'object' && typeof module === 'object') || (typeof define === 'function' && define.amd) || typeof exports === 'object'`,如果返回 `true`,则说明是这种情况,主要有以下两个解决办法: + + - 解决办法1:修改微应用 `webpack` 的 `libraryTarget` 为 `'window'` 。 + + ```diff + const packageName = require('./package.json').name; + module.exports = { + output: { + library: `${packageName}-[name]`, + - libraryTarget: 'umd', + + libraryTarget: 'window', + jsonpFunction: `webpackJsonp_${packageName}`, + }, + }; + ``` + - 解决办法2:微应用不打包成 umd ,直接在入口文件把生命周期函数挂载到 window 上,参考[非 webpack 构建的微应用](/zh/guide/tutorial#非-webpack-构建的微应用)。 + + +9. 如果在上述步骤完成后仍有问题,通常说明是浏览器兼容性问题导致的。可以尝试 **将有问题的微应用的 webpack `output.library` 配置成跟主应用中注册的 `name` 字段一致**,如: 假如主应用配置是这样的: