[Bug]子应用全局变量 undefined #1894

haixiangyan · 2021-12-27T10:33:47Z

子应用中 script 标签使用全局变量，会报错：XXXX is undefined

What happens?

主应用引用子应用时，子应用的 script 标签中写了全局变量会报错：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <script>
      var __JS_RETRY__ = {};

      function __rpReport(data) {
        console.log('__rpReport');
      }

      function __rpJsReport(loadType, msidType, url) {
        console.log('__rpJsReport');
      }

      function __retryPlugin(event) {
        console.log('retryPlugin')
      }

      // 改成下面就可以了
      // window.__JS_RETRY__ = {};
      //
      // window.__rpReport = (data) => {
      //     console.log('__rpReport');
      // }
      //
      // window.__rpJsReport = (loadType, msidType, url) => {
      //     console.log('__rpJsReport');
      // }
      //
      // window.__retryPlugin = (event) => {
      //     console.log('retryPlugin')
      // }
    </script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>if (!__JS_RETRY__["main.bbb7b1ce.chunk.js"]) {
      console.log('no retry');
    } else {
      console.log('retry');
    }</script>
  </body>
</html>

最小可复现仓库

https://github.com/haixiangyan/qiankun-bigass-app/tree/broken

main 为主应用，taobao 为有问题的子应用，上述代码写在 public/index.html 中。

复现步骤，错误日志以及相关配置

cd main && npm install && npm run start # 主应用安装&打开

cd taobao && npm install && npm run start # 子应用安装&打开

报错内容：

[import-html-entry]: error occurs while executing normal script <script>i

以及

index.js:130 Uncaught ReferenceError: __JS_RETRY__ is not defined

我自己试了一下，直接显式挂载到 window 上是 OK 的，比如 window.x = 11，但是目前我们自己的脚手架会自动生成如 var x = 1 以及 function x() {} 这样的隐式挂载的代码，所以希望可以大佬们对于这样的情况有什么建议么？

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]子应用全局变量 undefined #1894

[Bug]子应用全局变量 undefined #1894

haixiangyan commented Dec 27, 2021 •

edited

Loading

gongshun commented Dec 28, 2021

zjy850984598 commented Jan 19, 2024

[Bug]子应用全局变量 undefined #1894

[Bug]子应用全局变量 undefined #1894

Comments

haixiangyan commented Dec 27, 2021 • edited Loading

子应用中 script 标签使用全局变量，会报错：XXXX is undefined

What happens?

最小可复现仓库

复现步骤，错误日志以及相关配置

相关环境信息

gongshun commented Dec 28, 2021

zjy850984598 commented Jan 19, 2024

haixiangyan commented Dec 27, 2021 •

edited

Loading