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

oneezy
Excursionist
15 1 4

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;

 

 

Replies 9 (9)
brodrig
Tourist
11 1 2

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

grenzd
Tourist
5 0 4

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

sunilyadav84
Tourist
3 0 1

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
Shopify Partner
2 0 1

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
New Member
1 0 1
yooniq
New Member
1 0 0

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
Excursionist
22 2 2

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.

morsse333
New Member
2 0 0

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

aniketrochwani
New Member
1 0 0

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