React: "Cannot read property 'func' of undefined" when updated react to 16.0.0

Created on 4 Oct 2017  路  7Comments  路  Source: facebook/react

I updated react version to 16.0.0 and now i get an error in bundle.js, created by webpack in line
var func = _react.PropTypes.func;

I use prop-types as separately lib.

My webpack config

import path from 'path';
import webpack from 'webpack';

export default {
  entry: [
    'babel-polyfill',
    'webpack-hot-middleware/client',
    path.join(__dirname, '/client/index.js')
  ],
  output: {
    path: '/',
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [
          path.join(__dirname, 'client'),
          path.join(__dirname, 'server/shared')
        ],
        loaders: ['react-hot-loader/webpack', 'babel-loader']
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css']
  }
};

Most helpful comment

@jquense i work on this project by myself.
Fixed it. The bug was related to [email protected], which used old propTypes.

All 7 comments

Yes React.PropTypes was deprecated in version 15 and removed in v16, the proptypes have moved to the prop-type packages, check out the blog post about it for more info migrating: https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes

@jquense as i wrote "I use prop-types as separately lib.". That means, that i know about prop-types package and i use it. Open my issue back.

Sorry, for the quick close. This line: var func = _react.PropTypes.func; is clearly showing the old usage, it may not be your code but the problem is that someone is depending on React.PropTypes in your app, and that is the reason it's breaking

@jquense i work on this project by myself.
Fixed it. The bug was related to [email protected], which used old propTypes.

From https://reactjs.org/docs/typechecking-with-proptypes.html
React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

import PropTypes from 'prop-types';

@Skrpk Did it work after you updated react-router or did you have to do any extra configuration?

@romeo-folie hi, It looks like a react-router bug (related to prop types.) It's working on react-router 3.2.0
stackOveflow
react-router issue

i think you should sudo npm install --save [email protected]

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory} from 'react-router'

import reducers from './reducers';
import routes from './routes';
const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , document.querySelector('.container'));
//routes.js
import React from 'react'
import {Router, IndexRoute} from 'react-router'
import App from './components/app'

export default (
    <Router path="/" component ={ App } /> 
)

it works! :) :)

Was this page helpful?
0 / 5 - 0 ratings