Why is BrowserRouter rendering a blank screen?

Question

I'm having an issue with BrowserRouter routing after running yarn build on my ReactJS project. During development (yarn start) everything works as should but after building, the index.html shows only a blank page. The Chrome console shows no error and the network is able to get all the .js and .css files.

My App.js file looks like this:

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import withTracker from "./withTracker";

import DefaultLayout from "../src/layouts/Default";
import LoginLayout from "../src/layouts/Empty";

import Overview from "../src/views/Overview";

import "bootstrap/dist/css/bootstrap.min.css";
import "./shards-dashboard/styles/shards-dashboards.1.1.0.min.css";

export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route
            path="/"
            exact
            component={withTracker(props => {
              return (
                <DefaultLayout {...props}>
                  <Overview {...props} />
                </DefaultLayout>
              );
            })}
          ></Route>
        </Switch>
      </BrowserRouter>
    );
  }
}

When I change my App.js Router from BrowserRouter to HashRouter, like this:

import React, { Component } from "react";
import { HashRouter, Route, Switch } from "react-router-dom";

import withTracker from "./withTracker";

import DefaultLayout from "../src/layouts/Default";
import LoginLayout from "../src/layouts/Empty";

import Overview from "../src/views/Overview";

import "bootstrap/dist/css/bootstrap.min.css";
import "./shards-dashboard/styles/shards-dashboards.1.1.0.min.css";

export default class App extends Component {
  render() {
    return (
      <HashRouter>
        <Switch>
          <Route
            path="/"
            exact
            component={withTracker(props => {
              return (
                <DefaultLayout {...props}>
                  <Overview {...props} />
                </DefaultLayout>
              );
            })}
          ></Route>
        </Switch>
      </HashRouter>
    );
  }
}

It works normally after building, so I think it's a problem with the BrowserRouter. I've also tried to add the basename to BrowserRouter to this:

<Router basename={""}>

and this:

<Router basename={"/"}>

But none of them solves the problem. What am I doing wrong ?

Edit:

Adding some more information:

I've tried to build with my package.json homepage set to "./" and "." but it keeps building the blank page

Answer 1

Configure package.json with:

"homepage": "."

and rebuild