Invariant failed: Browser history needs a DOM

Question

My App.js (simplified but still gives error with just this much.)

import React, { Component } from "react";

class App extends Component {
  state = {};

  componentDidMount() {
    this.setState({ user });
  }
}

export default App;

I have updated my index.js now:

import React from "react";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const Index = () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

export default Index;

It gives the error Invariant failed: Browser history needs a DOM

Answer 1

In NextJS, you don't have to add the ReactDOM.render part as in normal ReactJS applications. NextJS does this themselves while rendering the application.

The bare minimum, you have to have the appication running is to add a index.js in pages directory:

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

Note that Index component here is exported by default.

Learn NextJS Docs