Can't use BrowserRouter in app... Invariant failed: Browser history needs a DOM

[oneezy]

When trying to use the BrowserRouter from 'react-router-dom'  in my app, I get the error message:

Invariant failed: Browser history needs a DOM

I have this working in a local project just fine but for some reason it won't work in my Shopify App (node/react w/ Shopify App CLI).

Does any one have any clue what could be causing the issue and how to fix?

Here's the full error message:

Error: Invariant failed: Browser history needs a DOM
    at invariant (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13:11)
    at Object.createHistory [as createBrowserHistory] (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/history/cjs/history.js:273:16)
    at new BrowserRouter (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-router-dom/modules/BrowserRouter.js:11:13)
    at processChild (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-dom/cjs/react-dom-server.node.development.js:3159:14)
    at resolve (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-dom/cjs/react-dom-server.node.development.js:3124:5)
    at ReactDOMServerRenderer.render (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-dom/cjs/react-dom-server.node.development.js:3598:22)
    at ReactDOMServerRenderer.read (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-dom/cjs/react-dom-server.node.development.js:3536:29)
    at renderToString (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-dom/cjs/react-dom-server.node.development.js:4245:27)
    at render (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next-server/dist/server/render.js:86:16)
    at renderPage (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next-server/dist/server/render.js:211:20)
    at Function.value (webpack:///node_modules/next/dist/pages/_document.js:109:1)
    at Object.loadGetInitialProps (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next-server/dist/lib/utils.js:42:35)
    at Object.renderToHTML (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next-server/dist/server/render.js:218:36)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at DevServer.renderToHTML (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next-server/dist/server/next-server.js:204:26)
    at DevServer.renderToHTML (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next/dist/server/next-dev-server.js:137:22)

Index.js file (code causing the problem)

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import Products from '../components/Products';
import ProductItem from '../components/ProductItem';

class Index extends Component {

  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Products} />
          <Route path="/product/:id" component={ProductItem} />
        </Switch>
      </Router>
    );
  }
}

export default Index;

[brodrig]

Did you ever resolve this? I'm having this same exact issue right now.

[grenzd]

Same here - would really appreciate if anyone knows the reason for this error.

[sunilyadav84]

I am getting same issue. Please help if any one getting solut

---

@oneezy wrote:

When trying to use the BrowserRouter from 'react-router-dom'  in my app, I get the error message:

Invariant failed: Browser history needs a DOM

I have this working in a local project just fine but for some reason it won't work in my Shopify App (node/react w/ Shopify App CLI).

Does any one have any clue what could be causing the issue and how to fix?

Here's the full error message:

Error: Invariant failed: Browser history needs a DOM
    at invariant (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13:11)
    at Object.createHistory [as createBrowserHistory] (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/history/cjs/history.js:273:16)
    at new BrowserRouter (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-router-dom/modules/BrowserRouter.js:11:13)
    at processChild (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-dom/cjs/react-dom-server.node.development.js:3159:14)
    at resolve (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-dom/cjs/react-dom-server.node.development.js:3124:5)
    at ReactDOMServerRenderer.render (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-dom/cjs/react-dom-server.node.development.js:3598:22)
    at ReactDOMServerRenderer.read (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-dom/cjs/react-dom-server.node.development.js:3536:29)
    at renderToString (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/react-dom/cjs/react-dom-server.node.development.js:4245:27)
    at render (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next-server/dist/server/render.js:86:16)
    at renderPage (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next-server/dist/server/render.js:211:20)
    at Function.value (webpack:///node_modules/next/dist/pages/_document.js:109:1)
    at Object.loadGetInitialProps (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next-server/dist/lib/utils.js:42:35)
    at Object.renderToHTML (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next-server/dist/server/render.js:218:36)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at DevServer.renderToHTML (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next-server/dist/server/next-server.js:204:26)
    at DevServer.renderToHTML (/mnt/c/Users/Work/Desktop/www/Shopify/apps/add-script-tags/node_modules/next/dist/server/next-dev-server.js:137:22)

Index.js file (code causing the problem)

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import Products from '../components/Products';
import ProductItem from '../components/ProductItem';

class Index extends Component {

  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Products} />
          <Route path="/product/:id" component={ProductItem} />
        </Switch>
      </Router>
    );
  }
}

export default Index;

---

ion.

[Zak8]

I love how this post has been completely ignored by the Shopify Team.

This issue is of course caused by the underlying technology Shopify have promoted and used which is static server rendering with Next.JS

you cant use that with react-router/react-router-dom.

fast forward this half baked Shopify App Bridge is introduced and nothing in their documentation mentions

building an app with create-react-app in order to take advantage of App Bridge´s navigation, the documentation 

is all over the place and no clear direction have been given, the closest example to a create-react-app for shopify is 

https://github.com/Shopify/polaris-react/tree/master/examples/create-react-app

[sarangj]

I am facing the same issue

[yooniq]

Hi everyone!

What I managed to do to go around this since you will be using Next.JS is to use their link or router library to move around page to page.

I tried using react-dom-router but no luck.

I suggest looking at these documentations

Directing to another page with links and understanding how it routes to that file

Routing

[betoxx1]

Hi guys, Just to let you know that this actualy works.

This is the code I used to make a try:

import { Heading, Page } from "@shopify/polaris";
import Link from "next/link"

const Index = () => {
  return (
    <Page>
      <Heading>Hola Mundo 🎉</Heading>
      <Link as={"/test"} href = "/test">Link</Link>
    </Page>
  );
}


export default Index;

import { Heading, Page } from "@shopify/polaris";
import Link from "next/link"

const test = () => {  
  return (
    <Page>
      <Heading>Test </Heading> 
      <Link as={"/"} href = "/">Back</Link>
    </Page>
  )
}



export default test;

Files:

Pages/

 - _app.js

- index.js

- test.js

Note.: To get the url you are in you have to use a hook called "useRouter".

import {useRouter} from "next/router"
const router = useRouter();
{router.query.note}

Thank you for all the help.

[aniketrochwani]

in which file do we need to use {useRouter}?

[morsse333]

I was thinking to server facet rendering itself in place of separatelink. I have done this with my store that hosted on shopify blog.

[HarshSr]

If you are using react-router-dom with nextjs. you just only need to add 

if (typeof window === 'undefined') return null;

return <Container {...props} />;

in your pages/{dummy}/index.js file to avoid "Invariant failed: Browser history needs a DOM"