OfficeDev / generator-office

Yeoman generator for building Microsoft Office related projects.
https://www.npmjs.com/package/generator-office
MIT License
825 stars 208 forks source link

BrowserRouter from react-router-dom is failing. #677

Closed shivgodi7 closed 2 years ago

shivgodi7 commented 2 years ago

I am using "react-router-dom": "^6.2.1",

The below code doesn't work because BrowserRouter is added to it, and gives the below error: ERROR: Uncaught TypeError: m.replaceState is not a function createBrowserHistory index.js:7 BrowserRouter index.js:82

CODE:

import { BrowserRouter } from "react-router-dom";
const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <ThemeProvider>
          <BrowserRouter>
               <Component title={title} isOfficeInitialized={isOfficeInitialized} />
          </BrowserRouter>
      </ThemeProvider>
    </AppContainer>,
    document.getElementById("container")
  );
};

Wondering whether there is a fix for this ERROR.

Foundasys commented 2 years ago

What helped me was to change BrowserRouter to HashRouter.

import { HashRouter as Router, Switch, Route, useHistory } from "react-router-dom";

return (
    <>
        <Router>
            <Switch>
                <Route path="/path1">
                    <Path1 />
                </Route>
                <Route path="/path2">
                    <Path2 />
                </Route>
                <Route path="/">
                    <MainPath />
                </Route>
            </Switch>
        </Router>
    </>
);
millerds commented 2 years ago

This doesn't look like anything specific to the tool or what we output. Sounds more like a compatibility challenge with using this library inside of the webview (which uses and iframe) office uses to render the taskpane. Some places online suggest what @Foundasys said (thanks!).