CODEWITHSUNDEEP
reactjsreact-router
Jonathan
Jonathan

Reputation: 315

Why does React Router-based app when compiled to `production` fail to show anything on iOS 7 but dev works?

On iOS 7 (Safari and Chrome), all routes render a blank page (presumably because the following markup is actually rendered in the outlet).

<div id="outlet"><noscript data-reactid=".15lgpv00t8g"></noscript></div>

This occurs when the build is compiled with NODE_ENV=production. If I leave that off and make the development build, the routes render as they should.

There is no console error returned in the production build - it just seems that React Router does not match any components so it renders nothing.

I'm not really sure where to start looking. I had a suspicion that old iOS does not support HTML5 history properly. I found a few old history and React Router issues along these lines but they appeared to be specific to iOS Chrome (https://github.com/reactjs/react-router/issues/2565 and https://github.com/mjackson/history/pull/146).

I also tried using hash history but the same blank screen issue occurred so that suggests it is not actually history-related.

Because this works in the dev build fine, I feel that any code snippets wouldn't be that useful, but to save some round trips, here are some anyway (pretty standard stuff).

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './routes'

if (typeof document !== 'undefined') {
  const outlet = document.getElementById('outlet')

  ReactDOM.render(<Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)} routes={routes} />, outlet)
}

// routes.js
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import App from './containers/App'
import NotFoundPage from './containers/NotFoundPage'
import HomePage from './containers/HomePage'
import SignupPage from './containers/SignupPage'
import LoginPage from './containers/LoginPage'
import ChangePasswordPage from './containers/ChangePasswordPage'
import LogoutPage from './containers/LogoutPage'

export default (
  <Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="signup/" component={SignupPage} />
    <Route path="login/" component={LoginPage} />
    <Route path="change-password/" component={ChangePasswordPage} />
    <Route path="logout/" component={LogoutPage} />
    <Route path="*" component={NotFoundPage} />
  </Route>
)

Is there something that I could be doing wrong to cause this or would it possibly be a history/react-router bug? Is there anything that I can do or provide to help debug what could cause the blank screen?

I suspect that my next step would be to try and create a minimal app that replicates the issue an provide a link, but I wanted to reach out before going down that road.

Versions:

Upvotes: 1

Views: 1108

Answers (1)

Luke Knepper
Luke Knepper

Reputation: 961

It's possible you're not formatting your paths correctly. Could you try formatting them like /signup instead of signup/?

(When I change my paths to the format that you use, I get runtime errors.)

Upvotes: 0

Related Questions