Reputation: 73
I created a new react outlook addin using the Yeoman generator and selected the React-Typescript Task pane option to create the add-in template. I installed react router dom version 6.3.0 and coded some basic routing as I would do for a regular React app. However, it doesn't work and keeps giving me a blank page although the same code works fine in a normal react web app.
I referred following links and tried to figure it out but it did not solve my issue:
Note: The add-in should load in outlook.com/outlook desktop application/ mobile
These are the changes I've done so far
<script>
window.backupHistoryFunctions = {};
window.backupHistoryFunctions.pushState = window.history.pushState;
window.backupHistoryFunctions.replaceState = window.history.replaceState;
</script>
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js">
</script>
<script>
window.history.pushState = window.backupHistoryFunctions.pushState;
window.history.replaceState = window.backupHistoryFunctions.replaceState;
console.log(window.history.replaceState)
</script>
const render = (Component) => {
ReactDOM.render(
<React.StrictMode>
<HashRouter basename="/">
<AppContainer>
<ThemeProvider>
<Component title={title} isOfficeInitialized={isOfficeInitialized} />
</ThemeProvider>
</AppContainer>
</HashRouter>
</React.StrictMode>,
document.getElementById("container")
);
};
/* Render application after Office initializes */
Office.onReady(() => {
isOfficeInitialized = true;
render(App);
});
import * as React from "react";
import { Routes, Route} from "react-router-dom";
import About from "../pages/about";
import Expenses from "../pages/expenses";
import Invoices from "../pages/invoices";
export default function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<About/>} />
<Route path="expenses" element={<Expenses />} />
<Route path="invoices" element={<Invoices />} />
</Routes>
</div>
);
}
import * as React from 'react'
import { Link } from 'react-router-dom'
export default function About() {
return (
<div>
About
<br/>
<Link to="/expenses/">Link to Expenses</Link>
</div>
)
}
import * as React from "react";
import {Link} from 'react-router-dom';
export default function Expenses() {
return (
<div>
<h2>Expenses</h2>
<br/>
<Link to="/invoices/">Link to Invoices</Link>
</div>
);
}
import * as React from "react";
import { Link } from "react-router-dom";
export default function Invoices() {
return (
<div>
<h2>Invoices</h2>
<br/>
<Link to="/">Link to About</Link>
</div>
);
}
These are the dependencies and devDependencies in my package.json file
"dependencies": {
"@fluentui/react": "^8.52.3",
"@microsoft/office-js": "^1.1.73",
"axios": "^0.26.1",
"core-js": "^3.9.1",
"es6-promise": "^4.2.8",
"html5-history-api": "^4.2.10",
"office-ui-fabric-core": "^11.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/preset-typescript": "^7.13.0",
"@types/office-js": "^1.0.180",
"@types/office-runtime": "^1.0.17",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@types/react-hot-loader": "^4.1.1",
"@types/webpack": "^4.4.34",
"@types/webpack-dev-server": "^4.1.0",
"acorn": "^8.5.0",
"babel-loader": "^8.2.2",
"copy-webpack-plugin": "^9.0.1",
"eslint": "^7.20.0",
"eslint-plugin-office-addins": "^2.0.0",
"eslint-plugin-react": "^7.28.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"less": "^3.9.0",
"less-loader": "^10.0.1",
"office-addin-cli": "^1.3.5",
"office-addin-debugging": "^4.3.8",
"office-addin-dev-certs": "^1.7.7",
"office-addin-lint": "^2.0.0",
"office-addin-manifest": "^1.7.7",
"office-addin-prettier-config": "^1.1.4",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"source-map-loader": "^3.0.0",
"ts-loader": "^9.2.5",
"typescript": "^4.3.5",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "4.7.3"
},
These are the console errors:
Upvotes: 2
Views: 1738
Reputation: 1
The React version of the project generated by the yo office
command is 17, and the corresponding react-router-dom version appears to be 5. I modified the taskpane.html
file based on the following article Office.js nullifies browser history functions breaking history usage, and I was able to confirm that it works.
<!-- taskpane.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="typescript">
<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>Contoso Task Pane Add-in</title>
+ <script type="text/javascript">
+ window._historyCache = {
+ replaceState: window.history.replaceState,
+ pushState: window.history.pushState,
+ };
+ </script>
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
+ <script type="text/javascript">
+ window.history.replaceState = window._historyCache.replaceState;
+ window.history.pushState = window._historyCache.pushState;
+ </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/11.0.0/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>
Upvotes: 0