Outlook Add In works in local dev, not in production

[hellofantastic]

Okay so I used yeo generator for react to make outlook add in. local development works awesome.

I have a developer 365 account desktop Mac version of Outlook, can login in also to web version.

To test the add in with other team mates who are not developers or have a dev setup I added accounts in my office 365 so they can have access. I did an npm run build and put the dist folder on my https://mydomain.com/dist and my manifest.prod.xml reflects that the domain is on shared hosting but figure that doesn't matter as its a bundled up app with everything included

I went into admin center of office 365 -> integrated apps upload custom app ... filled out input with "https://mydomain.com/dist/manifest.prod.xml" .. it validated and said can take upto 6 hours to show in app.

It eventually showed up ... now when I open it from desktop Outlook the sidebar opens has name at top and the Loading spinner goes for a second then disappears but sidebar stays blank , Inspecting ..safari opens I see

also Network tab shows it get all the files in from https://mydomain.com/dist without error, react and any libraries are bundled in taskpane.js as they should be

It just seems that when office ready the app isn't loading in?

Not sure what next steps to take to diagnose.. sprinkle console.logs here and there change manifest version re build re upload wait for it to refresh in outlook try check logs try again?

EDIT console.logs are omitted in prod build it seems

[hellofantastic]

After it became available in web 365 I logged in with safari and tried to access the add In same issue blank after load but the console of Safari provided more info

[hellofantastic]

So it may in fact be react-router-dom which I am using for navigation. I have followed recommended steps to get it working which it does in development by putting this in taskpane.html

    <script type="text/javascript">
        // Office js deletes window.history.pushState and window.history.replaceState. Cache them and restore them
        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">
        // Office js deletes window.history.pushState and window.history.replaceState. Restore them
        window.history.replaceState = window._historyCache.replaceState;
        window.history.pushState = window._historyCache.pushState;
    </script>

and I can see its still there in the production version of taskpane.html

Is it that in production the Office environment sees <Router></Router> and just says nope not going to even render whats inside

[hellofantastic]

Okay So the question is how do you get react-router-dom to work in production?

[hellofantastic]

Heres My App.js code using react-router-dom

import * as React from "react";
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import Progress from "./Progress";
import HomeMenu from './HomeMenu';

const routes = [
  {
    path: '/taskpane.html',
    exact: true,
    menu: () => <HomeMenu />,
    main: () => <div></div>
  },
  {
    path: '/newthing',
    menu: () => <div><Link to="/taskpane.html">Back</Link></div>,
    main: () => <h2>New Thing Component</h2>
  },
  {
    path: '/nextthing',
    menu: () => <div><Link  to="/taskpane.html">Back</Link></div>,
    main: () => <h2>Next thing Component</h2>
  },
  {
    path: '/bottlenecks',
    menu: () => <div><Link to="/taskpane.html">Back</Link></div>,
    main: () => <h2>Another Component</h2>
  }
]

const App = ({ title, isOfficeInitialized }) => {

    if (!isOfficeInitialized) {
      return (
        <Progress title={title} logo="assets/logo-filled.png" message="Please sideload your addin to see app body." />
      );
    }

    return (
      <div className="ms-welcome test">
      <Router>
      {
        routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            exact={route.exact}
          >
            <route.menu /> 
          </Route>
        ))
      }
      {
        routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            exact={route.exact}
          >
            <route.main />
          </Route>
        ))
      }
      </Router>
      </div>
    );
  }

  export default App;

[hellofantastic]

Holy cow got it to work ... starting looking at window .location in console of browser for production install and of course my routes had paths as /taskpane.html and once being served from mydomain.com/dist/taskpane.html of course browserRouter isn't even going to render AND show no error no equal paths... /taskpane.html !== /dist/taskpane.html jeez.