Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

icestark IE11下子应用始终加载失败 #3661

Closed
rootsli opened this issue Oct 15, 2020 · 24 comments
Closed

icestark IE11下子应用始终加载失败 #3661

rootsli opened this issue Oct 15, 2020 · 24 comments
Assignees
@ClarkXia
Labels
bug icestark

Comments

@rootsli
Copy link

rootsli commented Oct 15, 2020

1.Chrome下应用能正常访问
2.IE11下，框架和子应用分别独立访问可正常访问
3.IE11下框架应用始终命中ErrorComponent，提示子应用加载失败，F12查看控制台无任何报错
4.框架appConfig配置如下：

icestark: { type: 'framework', Layout: FrameworkLayout, getApps: async () => { }, appRouter: { basename: '/', ErrorComponent: <div style={{ fontSize: "18px" }}>应用有更新，请<a style={{ color: "#1375d8", cursor: "pointer", }} onClick={() => { window.location.reload(); }}>刷新应用</a></div>, LoadingComponent: <div>&nbsp;</div>, }, },

发生了什么?

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

建议并上传到你的 GitHub 仓库，请使用 yarn init ice <project-name> 选择 Lite 模板，这样您的问题我们会更高优先级的进行解决。

期望的结果是什么

IE11下能正常访问应用

相关环境信息

  • ice.js 版本：
  • build.json 配置：
  • Node 版本：
  • 操作系统：
@ClarkXia
Copy link
Collaborator

appConfig没有具体子应用信息？
请提供下触发 errorComponet 的具体错误信息
如果用到 entry / sanbox 能力，框架将依赖 fetch，在 IE 11 下需要 polyfill

@rootsli
Copy link
Author

rootsli commented Oct 15, 2020

entry

{
path: "/basic",
entry: "/basic/",
}

子应用是使用entry加载的。polyfill需要怎么引入呢？编译配置项injectBabel使用默认值不会自动引入么？

@ClarkXia
Copy link
Collaborator

https://github.com/github/fetch 可以使用这个包覆盖 window 上的 fetch 方法

@rootsli
Copy link
Author

rootsli commented Oct 15, 2020

https://github.com/github/fetch 可以使用这个包覆盖 window 上的 fetch 方法

👌 我试试

@rootsli
Copy link
Author

rootsli commented Oct 16, 2020

https://github.com/github/fetch 可以使用这个包覆盖 window 上的 fetch 方法

import这个包后，IE11下已经有fetch对象，但是还是报ErrorComponent错误。
image

@ClarkXia
Copy link
Collaborator

错误信息是什么，ErrorComponent 可以输出底层抛的错误

@rootsli
Copy link
Author

rootsli commented Oct 16, 2020

错误信息是什么，ErrorComponent 可以输出底层抛的错误

浏览器url：https://xxxxxxxx/gpx-ice/gpx-subapp/#/
子应用资源加载url: https://xxxxxxxx/gpx-ice/gpx-subapp/undefined/gpx-subapp/js/index.703c0aa66efbdfc5df79.js
子应用资源加载正确url：https://xxxxxxxx/gpx-subapp/js/index.703c0aa66efbdfc5df79.js

IE11下子应用资源加载url拼接不对，我们子应用使用entry加载；icestark框架使用browser路由，子应用使用hash路由。

这个是不是框架BUG??

@rootsli
Copy link
Author

rootsli commented Oct 16, 2020

错误信息是什么，ErrorComponent 可以输出底层抛的错误

IE11下，子应用资源url地址拼接错误了

@ClarkXia ClarkXia added the bug label Oct 16, 2020
@ClarkXia
Copy link
Collaborator

ClarkXia commented Oct 16, 2020 •
edited

IE 11 下 parseUrl 逻辑有问题 https://github.com/ice-lab/icestark/blob/master/src/util/handleAssets.ts#L192
可以先使用 js assets 或者entry 中资源为绝对地址的形式

@ClarkXia
Copy link
Collaborator

@ice/stark@1.6.0-2 beta 版本已修复

@rootsli
Copy link
Author

rootsli commented Oct 16, 2020

@ice/stark

build-plugin-icestark要升级到哪个版本哈？当前@ice/stark 1.5.6 ；build-plugin-icestark 1.7.0；

@ClarkXia
Copy link
Collaborator

@ice/stark 版本升级即可

@rootsli
Copy link
Author

rootsli commented Oct 16, 2020

@ice/stark 版本升级即可

好像不行吧？我们没有直接使用@ice/stark，使用的build-plugin-icestark，而这个插件依赖"@ice/stark": "^1.3.1"，会自动去安装1.5.6版本

@rootsli
Copy link
Author

rootsli commented Oct 16, 2020

image

@ClarkXia
Copy link
Collaborator

先使用 beta 版：build-plugin-icestark@1.7.2-2

@rootsli
Copy link
Author

rootsli commented Oct 26, 2020

更新beta版后，ie11下变成fetch报错了。调用栈如下：（使用whatwg-fetch）
image

image

image

image

我们跟踪发现报错是因为：icestark框架的handleAssets.ts文件getEntryAssets方法在IE11下调用fetch时，content-type为空字符串，导致fetch抛出错误。

能否帮忙排查下，是否是框架的BUG哈？

@ClarkXia
Copy link
Collaborator

content-type 在 response header 中，一般不用主动设置，可以直接代理 window.fetch，排查下具体原因，fetch 资源本身就受跨域等限制:

window.fetch = (url) => {
      return Promise.resolve({
        text: () => 'const error = 1;',
      });
    };

@rootsli
Copy link
Author

rootsli commented Oct 28, 2020

content-type 在 response header 中，一般不用主动设置，可以直接代理 window.fetch，排查下具体原因，fetch 资源本身就受跨域等限制:

window.fetch = (url) => {
      return Promise.resolve({
        text: () => 'const error = 1;',
      });
    };

我们排查了很久，没有找到具体原因。目前以下操作必现：
1.页面首次加载、强制刷新或url回车，子应用可正常加载
2.通过在页面内点击链接跳转子应用，子应用只加载了index.html，子应用js&css等资源没有加载，子应用区域空白，控制台报如上截图错误。

※主应用browser路由，子应用hash路由，通过entry方式加载子应用
※url链接类似下面这样：
https://www.host.com/appMain/appSub/#/subRouter

其中，appMain为icestark主应用，appSub为子应用，subRouter为子应用路由。

@rootsli rootsli mentioned this issue Oct 30, 2020
Closed
@ClarkXia
Copy link
Collaborator

ClarkXia commented Nov 4, 2020

官方 demo 在 ie11 中无法复现上述问题（引入 whatwg-fetch 后正常运行），可以提供下简单的复现 demo 方便排查

@rootsli
Copy link
Author

rootsli commented Nov 5, 2020

官方 demo 在 ie11 中无法复现上述问题（引入 whatwg-fetch 后正常运行），可以提供下简单的复现 demo 方便排查

官方demo地址能贴下吗？我在我本机访问下是否正常。如果正常，我再提供我们应用的demo。

@ClarkXia
Copy link
Collaborator

ClarkXia commented Nov 6, 2020

直接使用 https://github.com/alibaba/ice/tree/master/examples/icestark-layout
在 public 目录下新增 test.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>icejs</title>
    <link href="//ice.alicdn.com/icestark/child-seller-react/index.css" rel="stylesheet">
  </head>
  <body>
     <script type="text/javascript" src="//ice.alicdn.com/icestark/child-seller-react/index.js"></script>
  </body>
</html>

public 下的资源可以通过 http 访问：http://localhost:3333/test.html
把 path 为 /seller 的路径替换成 entry 加载即可

@rootsli
Copy link
Author

rootsli commented Nov 16, 2020

直接使用 https://github.com/alibaba/ice/tree/master/examples/icestark-layout
在 public 目录下新增 test.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>icejs</title>
    <link href="//ice.alicdn.com/icestark/child-seller-react/index.css" rel="stylesheet">
  </head>
  <body>
     <script type="text/javascript" src="//ice.alicdn.com/icestark/child-seller-react/index.js"></script>
  </body>
</html>

public 下的资源可以通过 http 访问：http://localhost:3333/test.html
把 path 为 /seller 的路径替换成 entry 加载即可

👌 我试试

@ClarkXia
Copy link
Collaborator

如果还能复现，提供复现下 demo

@rootsli
Copy link
Author

rootsli commented Dec 1, 2020

如果还能复现，提供复现下 demo

最近还没空复现 等复现了 回复你

@rootsli rootsli mentioned this issue Mar 26, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ClarkXia ClarkXia

Labels
bug icestark
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@chenbin92 @rootsli @ClarkXia