React Router in office JS excel causes white page

Question

I am trying to develop addins for Excel with TypeScript and React but the road to success is more than cumbersome because the Office addin does behave diffferently than a CRA React boilerplate web application. I have created a Yo Office typescript React project for my taskpane addin and in my App.tsx I have the following JSX return value:

import * as React from "react";
import {  Stack } from "office-ui-fabric-react";

import { HashRouter as Router, Route, Switch, Link} from 'react-router-dom';
import {FeedbackProvider}  from "./FeedbackContext";
import { Properties } from "./pages/Properties";
import { Translations } from "./pages/Translations";


export interface AppProps {
  title: string;
  isOfficeInitialized: boolean;
}

//Tryout feedback message interface for feedback messages
export interface FeedBackMessages {
  message: string,
  messageType: string,
  mVisible : boolean,
  onConfirm?: () => void,
  onCancel?: () => void
}

//this context is needed to access the user feedback at any time
export const FeedbackContext = React.createContext(() => { });


export default  class App extends React.Component<AppProps, FeedBackMessages> {
 constructor(props, context) {
    super(props, context);
    this.state = {
      listItems: []
    };
  }


  render() {
    const { title, isOfficeInitialized } = this.props;
    if (!isOfficeInitialized) {
      return (
        <Progress title={title} logo="assets/Boxes32x32.png" message="Please sideload your addin to see app body." />
      );
    }
    
    return (
      <Router>
     
        <h2> Profile generator</h2>
       <nav>
        <ul>
        <Link to='/Properties'><li>Properties</li></Link>
        <Link to='/Translations'><li>Translations</li></Link>
        </ul>

      </nav>
      <div>
      <Switch>
         <Route path="/properties/" component={Properties} /> 
         <Route path="/translations/" component={Translations} /> 
      </Switch>
      </div>
       </Router>
    );
  }
}

This is a very basic navigation example with React router. If I use this code in the CRA boilerplate with TypeScript it works on Google Chrome or Firefox but if I dare to use it with Excel and sideload the addin in Excel and I click on the Properties link or on the translations link, it redirects to a blank page. The only way to get back to the main page is to reload the app. I have no idea where to look because there are no errors and debugging is not working neither. I found this post but it did not solve my problem. Many thanks in advance.

Update 14 sept

I still get the white pages but I got the F12 developer tools working and I get the following error feedback:

0: Unable to get property 'createElement' of undefined or null reference Properties.tsx (5,22)

The above error occurred in the component: in Properties (created by Context.Consumer) in Route (created by App)

in Switch (created by App)
in div (created by StackItem)
in StackItem (created by App)
in Router (created by HashRouter)
in HashRouter (created by App)
in div (created by Stack)
in Stack (created by App)
in App
in AppContainer`
React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

So it looks like there is something wrong with my properties component but the component looks like this:

import React, {useContext} from "react";
import { FeedbackContext }from "../FeedbackContext";
import { Button, ButtonType } from "office-ui-fabric-react";

const Properties=()=>{

return(
    <>
        <h3>Properties setting</h3>

  </>
    )
}

 export default Properties;

This means I only put a H3 tag to show some text (I removed everything else). What could go wrong?

many thanks

I'm not familiar with <Switch> or <Route>. Do the links go to a resource in the exact same domain as the taskpane? — Rick Kirkham
HI Rick, indeed. I have a folder called pages and when I do the routing with the CRA I get localhost:3000/#/Properties. I read here on Stack Overlfow that BrowserRouter does not work. — g00golplex
the library react-router-dom relies on running in a browser (something with a Document Object Model (DOM)) so my suspicion is that excel or however you are running this doesn't have the equivalent facilities for the library to work correctly. Have no idea what the equivalent approach would be. — Tadhg McDonald-Jensen
according to this post: stackoverflow.com/questions/58071999/… React router should work like in a normal browser as stated by Rick Kirkham, here is another post about the matter, but none of the proposed solutions work for me: stackoverflow.com/questions/58071999/…. many thanks for your feedback — g00golplex

g00golplex g00golplex · Accepted Answer · 2020-10-25T20:24:04

I found the issue to cause this error! I searched like an idiot for many weeks but somewhere in the Scaffolding of the Yeoman generator, Microsoft did a bad job in not accepting the:

import React from "react";

import statement in the routed component page.

If you change it to the older (React Class based component standard)

import * as React from "react";

on top of the properties component and then magically, the React (Hash) router works!

So I think it is really time that Microsoft updates the Yeoman Scaffolding for supporting modern React syntax and finally use functional components for the App.tsx!

React Router in office JS excel causes white page

1 Answers