Invariant failed: Browser history needs a DOM

How to / Third Party Tooling
1

Hello,
i can’t really solve the following problem:

I fetch a list of articles from my site backend (nodejs) and print it in the react demo app.

The app works correctly from the Web. When I try to start it in Android I get the following error:

Invariant failed: Browser history needs a DOM

I think the problem is here:

import {BrowserRouter, Router, Link, Route, Switch} from 'react-router-dom';
...
<BrowserRouter>
  <Switch>
     <Route path="/detail/:id" component={RouterDetail}/>
     <Route exact={true} path="/home" render={() => content}/>
  </Switch>
</BrowserRouter>

I have read everything on the web about this error but I have not been able to understand the problem. I found a lot about react server side.

But my case is different, i use react only as a frontend.

I also tried the following change, on web works correctly, on android still doesn’t works:

import { Router } from "react-router";
import {Link, Switch, Route} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
...
const history = createBrowserHistory();
...
<Router history={history}>
  <Route path="/detail/:id" component={RouterDetail}/>
  <Route exact={true} path="/home" render={() => props.content}/>
</Router>

I have also created a thread on stackoverflow, but unfortunately I have not received a response.

Help would be appreciated

2

expo is dying? it is almost impossible to get help in this forum

3

still waiting for some help if possible.

4

Hey @silli,

You’re trying to use a web-based library on a mobile Android client. Additionally, your issue revolves around a third-party library that is not part of Expo’s offerings so we don’t provide support for such an issue.

Cheers,
Adam

5

Hi, thanks for the reply at least.
I wrote here, on stackoverflow, on the github repository, on the expo forum, and now on reactflux. I didn’t get help anywhere.

Could you just suggest me which library should I use?
Thank you

6

i am facing same issue.please help

7

The environment in a web browser is different to the environment in a React Native (or Expo) app.

The browser uses something called the DOM (Document Object Model) which is built with HTML and maybe JavaScript. In React Native there is no DOM or HTML, unless you use a WebView (which is basically a web browser window embedded inside your app.)

So this means that if you use a JavaScript library that expects the DOM to exist in your app then it would work on Web, but not on Android or iOS.

To solve this you will have to do one of two things:

  • Find a replacement to the problematic library that works on all of the platforms you are interested in; or
  • Check which platform you’re on at run time and run the web-specific code on the web and other code on Android/iOS

So you will first have to identify which library is causing your problem. In the OP’s case it looks to me like a routing/navigation library. So you could try switching to React Navigation which is designed to work on React Native.

For the second option above, have a look at Expo’s documentation on Handling platform differences

8

Thanks for the information. . . . .