Create-react-app: Create React App builds empty document with react-router

[furkle]

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]

Are you serving the build? Just opening it from the filesystem won't do.
The instructions to serve the build are printed after you build.

[gaearon]

Oops, missed this part:

whether I open it locally or host it on my website.

I don't know what's causing the problem. We'll need to see a hosted example to figure it out.

[furkle]

Example meaning the codebase? Because what's hosted is the empty document. (https://furkleindustries.com/hypercomp) Would you prefer to look at the repository? (It's here: https://bitbucket.org/furkle/hypercomp)

And I may be remembering this entirely wrong, but before I started using react-router I recall being able to set the homepage field to a C:\... field and it worked then.

[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!

[furkle]

This works in the test build, but in the version I'm serving online, all the route links point at the root directory for the website, not the root directory of the app. Is there an easy workaround for this?

Thanks for your help so far.

[Timer]

You should be able to apply similar logic to your links:

<Link to={`${process.env.PUBLIC_URL}/path`}>...</Link>

[furkle]

Oh, duh, I have no idea why it didn't occur to me that I'd have to change the <Link>s too. Thanks.

[haki9]

I have the same problem too! Did you fix it? @furkle

[Timer]

@hungtn if you open a new issue we'll be more than happy to help or point you to the right documentation.
If things aren't clear, please let us know so we can improve our docs!

[haki9]

@Timer Thanks you so much, I found that is my mistake.
Have a nice day pro 😃

[Timer]

@hungtn glad to hear it got fixed! Please let us know if there's anything we can help with. 😄

[gaearon]

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

[haki9]

@gaearon My problem is when I build: npm run build. it also creates bundle.js in dist folder but when I run index.html, it's empty. The contains only a comment with the text _react-empty: 1_ . Because of my lack of knowledge so I try a lot of things include what you put above. But nothing changes. After that, I push the code to the server. It run : ) .And thanks for your Redux Tutorial. I have learned a lot from that.