CODEWITHSUNDEEP
javascriptreactjswebpackbabeljs
capouch
capouch

Reputation: 577

React app works fine with 15.6.2, breaks with 16.0.0

I am in the process of upgrading to React v16. The release document indicates that "With minor exceptions, if your app runs in 15.6 without any warnings, it should work in 16." My app runs fine on 15.6.2 (and without warnings), but not at all on 16.0.0, throwing strange errors as it tries to run the bundles: Uncaught TypeError: Cannot read property 'string' of undefined when it loads one of the bundle files and Uncaught TypeError: Cannot read property 'string' of undefined" when it loads the other.

I suspect this code to be the source of the incompatiblity:

ReactDOM.render((
  <Router>
    <div>
      <Route component = { Header } />
      <Switch>
        <Route exact path = '/' component = { Home } />
        <Route exact path = '/index.html' component = { Home } />
        <Route path = "/browse" component = { Browse } />
        . . . . . . . etc. . . . . 
      </Switch>
      <Route component = { Footer } />
    </div>
  </Router>
), document.getElementById("main"))

I am rendering this, AFAIK, outside of any lifecycle methods,and this code is the app's entry point in my webpack config file.

I am glad to append more of the build scaffolding if it would be of use. The app runs perfectly under 15.6.2.

Upvotes: 1

Views: 152

Answers (1)

Dan Abramov
Dan Abramov

Reputation: 268255

Uncaught TypeError: Cannot read property 'string' of undefined

This looks caused by code like

MyComponent.propTypes = {
  something: React.PropTypes.string
};

This is because PropTypes have been moved to a separate package in React 16:

MyComponent.propTypes = {
  something: PropTypes.string
};

This code does warn in 15, so if you don’t see the warnings, something might be wrong with your setup. For example, maybe you mistakingly used a production version of React in development, and thus didn’t see the warnings.

Seeing that you used React Router, make sure to update it to a version compatible with React 16. Both latest 3.x and 4.x versions are compatible.

Upvotes: 2

Related Questions