create-react-app application renders in npm start, but shows only react-empty: 1 in npm build

Question

I have a React app I've build using create-react-app, which uses react-router. When I open the test development view using npm start, everything works perfectly fine. However, when I build the app -- regardless of what I set the homepage field in package.json to -- all I get is a #root div with a react-empty: 1 comment.

My index.js component looks like so:

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')
 );

Please let me know if you need to see any more code in order to figure out what's going on. Just to reiterate -- there are no errors showing up whatsoever, either in npm test or the build copy of the app.

What do you mean by "homepage field in package.json"? Why you added such a field? — kbariotis
– kbariotis, Commented Feb 20, 2017 at 0:39
@kbariotis Because that's how create-react-app works with regards to assets stored at relative paths. Are you familar with the technology I'm talking about? — furkle
– furkle, Commented Feb 20, 2017 at 0:57
@kbariotis as per documentation: By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json, for example: "homepage": "http://mywebsite.com/relativepath" This will let Create React App correctly infer the root path to use in the generated HTML file. — furkle
– furkle, Commented Feb 20, 2017 at 0:58
I see, but i don't see how that could affect your app. Any other modification you did? — kbariotis
– kbariotis, Commented Feb 20, 2017 at 1:26
Because if it's not set correctly it won't be able to find the script bundle, which means no react app. And no. — furkle
– furkle, Commented Feb 20, 2017 at 1:30

sudo bangbang · Accepted Answer · 2017-05-23 06:01:32Z

1

This is a problem with relative path as homepage in package.json and definition of routes.

Router will render something like  if it has to render say null.

You've set set Route path="/" where this should match the relative path in homepage.

You could change this to

<Route path=process.env.PUBLIC_URL component={App}>

This would take what you've given as homepage in package.json

answered May 23, 2017 at 6:01

sudo bangbang

28.4k11 gold badges78 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

create-react-app application renders in npm start, but shows only react-empty: 1 in npm build

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related