【发布时间】：2021-11-05 11:17:47
【问题描述】：
我正在开发使用 reactjs 构建的 office js 插件。该插件在 chrome 和边缘浏览器中按预期工作，但是，当我在 Outlook 2013 和 2016 中打开它时，他们使用 Internet Explorer webview 打开此类插件，我在控制台中得到一个空白和以下错误：
SCRIPT16389：未指定的错误。 taskpane.js (134,45357)
App.js
import * as React from "react";
import { Route, Switch, Redirect, BrowserRouter as Router } from "react-router-dom";
import Progress from "./Progress";
import AuthContext from "../context/auth-context";
import Login from "../components/Login/Login";
import { connect } from "react-redux";
async UNSAFE_componentWillMount() {
let pageName = getUrlParameter("mode");
console.log("start of UNSAFE_componentWillMount")
this.setState({ pageName: pageName });
if (this.props.isOfficeInitialized) {
let _settings = Office.context.roamingSettings;
let isUserLoggedIn = _settings.get("isUserLoggedIn");
isUserLoggedIn && isUserLoggedIn != ""
? this.setState({ Authenticated: true })
: this.setState({ Authenticated: false, pageName: "login" });
}
console.log("end of UNSAFE_componentWillMount")
}
componentDidUpdate(prevProps) {
console.log(" start of componentDidUpdate")
if (prevProps.isOfficeInitialized !== this.props.isOfficeInitialized) {
this.setState({ isOfficeInitialized: true });
let pageName = getUrlParameter("mode");
this.setState({ pageName: pageName });
if (this.props.isOfficeInitialized) {
console.log("office initialize")
let _settings = Office.context.roamingSettings;
let isUserLoggedIn = _settings.get("isUserLoggedIn");
isUserLoggedIn && isUserLoggedIn != ""
? this.setState({ Authenticated: true })
: this.setState({ Authenticated: false, pageName: "login" });
console.log("end of office initialize")
}
}
console.log(" end of componentDidUpdate")
}
switchComponent() {
console.log("start of switch component")
switch (this.state.pageName) {
case "login":
return (
<Redirect to="/login" /> );
}
console.log("end of switchComponent")
}
render() {
const { title } = this.props;
//this.setState({ isOfficeInitialized: isOfficeInitialized });
if (!this.state.isOfficeInitialized) {
return (
<Progress
title={this.state.pageTitle}
logo="assets/logo-filled.png"
message="Please sideload your addin to see app body."
/>
);
}
return (
<Router>
<div className="ms-welcome">
{/* {<Header title={this.state.pageTitle} clicked={this.loginHandler} isAuth={this.state.isAuthenticated} message="Welcome" />} */}
<AuthContext.Provider
value={{
isAuthenticated: this.state.Authenticated,
login: this.loginHandler
}}
>
<div>
<Switch>
<Route path="/login" exact component={Login} />
</Switch>
{this.switchComponents()}
</div>
</AuthContext.Provider>
</div>
</Router>
);
}
Internet Explorer 日志
start of UNSAFE_componentWillMount
end of UNSAFE_componentWillMount
start of componentDidUpdate
office initialize
end of office initialize
end of componentDidUpdate
start of switch component
start of componentDidUpdate
end of componentDidUpdate
Error: Unspecified error.
SCRIPT16389: Unspecified error.
taskpane.js (134,45357)
任务窗格.html
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. -->
<!-- See LICENSE in the project root for license information -->
<!doctype html>
<html lang="en" data-framework="javascript">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OTJ Jira for Outlook</title>
<script>
var pushStateRef = history.pushState;
var replaceStateRef = history.replaceState;
</script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
<script>
history.pushState = pushStateRef;
history.replaceState = replaceStateRef;
delete pushStateRef;
delete replaceStateRef;
</script>
<!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>
<!-- Template styles -->
<link href="taskpane.css" rel="stylesheet" type="text/css" />
</head>
<body class="ms-font-m ms-Fabric">
<div id="container"></div>
</body>
</html>
任务窗格.js
if (canUseHistory) {
globalHistory.replaceState({ //causing the error
key: key,
state: state
}, null, href);
if (forceRefresh) {
window.location.replace(href);
} else {
var prevIndex = allKeys.indexOf(history.location.key);
if (prevIndex !== -1) allKeys[prevIndex] = location.key;
setState({
action: action,
location: location
});
}
错误日志： here
【问题讨论】：
-
错误指向哪一行代码？我认为错误可能是由于使用了 ECMAScript 2015 或更高版本的语法和功能，或者代码中的 TypeScript 与 IE 11 不兼容。您可以参考 this doc 并尝试使用转译器或 polyfill 来制作您的代码与 IE 11 兼容。
-
由于您的插件在 chrome 和 edge 上运行良好，看起来问题出在 IE11 不支持的某些语法上。你能分享哪行代码给你错误。
-
@OutlookAdd-insTeam-MSFT 我已更新帖子并附加日志错误。
-
@YuZhou 查看错误日志
-
您需要点击错误行，然后它会显示哪行代码产生了错误。然后我们可以看到哪些确切的语法与 IE 不兼容。例如，您可以在显示的错误日志中单击
taskpane.js (188539,7)。
标签： reactjs internet-explorer office-js outlook-addin