Invariant Violation: Browser history needs a DOM on `npm run build`

React 16, Node 9.4.0, Mac OSX

I’m migrating from CRA to react-static.

I’ve setted up react-static-routes and importing everything from react-static instead of react-router-dom for sure.

[BABEL] Note: The code generator has deoptimised the styling of "/Users/justfly/projects/taxi-static/dist/static.266c1799.js" as it exceeds the max of "500KB".
{ Invariant Violation: Browser history needs a DOM
    at invariant (/Users/justfly/projects/taxi-static/node_modules/invariant/invariant.js:42:15)
    at createBrowserHistory (/Users/justfly/projects/taxi-static/node_modules/history/createBrowserHistory.js:49:27)
    at Object.defineProperty.value (/Users/justfly/projects/taxi-static/dist/static.266c1799.js:4453:15)
    at __webpack_require__ (/Users/justfly/projects/taxi-static/dist/static.266c1799.js:30:30)
    at Object.defineProperty.value (/Users/justfly/projects/taxi-static/dist/static.266c1799.js:8741:16)
    at __webpack_require__ (/Users/justfly/projects/taxi-static/dist/static.266c1799.js:30:30)
    at Object.<anonymous> (/Users/justfly/projects/taxi-static/dist/static.266c1799.js:8496:16)
    at __webpack_require__ (/Users/justfly/projects/taxi-static/dist/static.266c1799.js:30:30)
    at Object.defineProperty.value (/Users/justfly/projects/taxi-static/dist/static.266c1799.js:73:18)
    at /Users/justfly/projects/taxi-static/dist/static.266c1799.js:11:17 name: 'Invariant Violation', framesToPop: 1 }

[JustFly1984]

I solved an issue.

The reason was that I had two instances of Router in my app - one for main app, and second for modal window. I could not use BrowserRoutes, cos both instances required the same history object created by createBrowserHistory, and in my case it was instantiated on server side, which leads to an error.

Solution is simple refactor to history instantiation:

let history

if (typeof document !== 'undefined') {
  const createBrowserHistory = require('history/createBrowserHistory').default

  history = createBrowserHistory()
}

export default history

[joaopedromattos]

@JustFly1984 Hi, I am learning react, I have the same problem. My question is: what file I can write this code? Thanks. 😃

let history if (typeof document !== ‘undefined’) { const createBrowserHistory = require(‘history/createBrowserHistory’).default history = createBrowserHistory() } export default history

I want to know that too! I have the same issue and I don’t have any clue about in what file should I write this code.

EDIT

Solved this issue by removing the <BrowserRouter> tag from my App.jsx file.

Before:

 return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={LandingPage} />
        <Redirect to="/" />
      </Switch>
    </BrowserRouter>
  );

After

return (
      <Switch>
        <Route path="/" component={LandingPage} />
        <Redirect to="/" />
      </Switch>
  );