Create React App builds empty document with react-router

I am using the current version of Create React App and I’m having a weird problem. I just started using react-router and everything is working perfectly in npm start. However, when I build the file with npm run build, the resultant HTML is entirely blank. The #root element exists, but contains only a comment with the text react-empty: 1.

This behavior is consistent regardless of how I set the homepage field in package.json, and whether I open it locally or host it on my website.

My app.js file is as follows:

... imports ...
ReactDOM.render(
    (<Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home} />
            <Route path="/news" component={News} />
            <Route path="/current" component={Current} />
            <Route path="/previous" component={Previous} />
            <Route path="/about" component={About} />
            <Route path="/enter" component={Enter} />
            <Route path="/login" component={Login} />
            <Route path="/profile" component={Profile} />
        </Route>
    </Router>),
    document.querySelector('#root')
);

[gaearon]

Your route definition is declared against /. But your app is served from /hypercomp/. React Router doesn’t know anything about the homepage setting, so it can’t match the URLs.

You can work around this by doing something like:

const baseUrl = process.env.PUBLIC_URL; // will be /hypercomp
ReactDOM.render(
    (<Router history={browserHistory}>
        <Route path={baseUrl + "/"} component={App}>
            <IndexRoute component={Home} />
            <Route path={baseUrl + "/news"} component={News} />
            <Route path={baseUrl + "/current"} component={Current} />
            <Route path={baseUrl + "/previous"} component={Previous} />
            <Route path={baseUrl + "/about"} component={About} />
            <Route path={baseUrl + "/enter"} component={Enter} />
            <Route path={baseUrl + "/login"} component={Login} />
            <Route path={baseUrl + "/profile"} component={Profile} />
        </Route>
    </Router>),
    document.querySelector('#root')
);

In the future, we might change it so that the app would get served from the relative path in development too, so that you’d learn about the problem earlier. See discussion in https://github.com/facebookincubator/create-react-app/issues/1582.

Hope this helps!

[gaearon]

Also consider sharing what your mistake was. Somebody else might repeat it 😉