react-responsive-accordion -> getting "Uncaught TypeError: Cannot read property 'number' of undefined"

Question

I am new to react js and creating a simple react app to display an accordion by using 'react-responsive-accordion'. followed the link 'https://www.npmjs.com/package/react-responsive-accordion' to do so, but i am getting below the error

Below is the code:

package.json class:

    {
  "name": "reactapp",
  "version": "1.0.0",
  "description": "React JS Application",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.9.0",
    "react": "^16.1.1",
    "react-collapsible": "^2.0.3",
    "react-dom": "^16.1.1",
    "react-responsive-accordion": "^1.0.0",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.11.0"
  }
}

main.js class:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

App.jsx class:

import React from 'react';
import Accordion from 'react-responsive-accordion';

class App extends React.Component {
      render() {
      return (
        <div>
            <Accordion>
               <div data-trigger="A nifty React accordion component">
        <p>So this is an Accordion component that used the <a href="https://github.com/glennflanagan/react-collapsible">react-collapsible</a> component. How handy.</p>
      </div>

      <div data-trigger="What the difference?" data-trigger-when-open="THAT is the difference!">
        <p>An Accordion is different to a Collapsible in the sense that only one "tray" will be open at any one time.</p>
      </div>

      <div data-trigger="I'm responsive and I have a little secret. Look inside.">
        <p>And this Accordion component is also completely repsonsive. Hurrah for mobile users!</p>
      </div>
            </Accordion>
        </div>
      );
   }
}

export default App;

webpack.config.js:

var config = {
    entry: './main.js',
    output: {
        path: '/',
        filename: 'index.js'
    },

    devServer: {
        inline: true,
        port: 8089
    },

    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015','react']
                }
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
              }
        ]
    }
}

module.exports = config;

Any help to resolve this issue would be appreciated.

Answer 1

install react-collapsible-react16 for react version 16 and up. This works for me.

Answer 2

My case was like this, by used React.PropType, I got error 'Uncaught TypeError: Cannot read property 'number' of undefined'

Header.propTypes = {
    userid: React.PropType.number
};

Then I changed to use PropTypes from 'prop-types':

import PropTypes from 'prop-types';

...

Header.propTypes = {
    userid: PropTypes.number
};

Please refer to https://reactjs.org/docs/typechecking-with-proptypes.html for more details, I am using:

"react": "^16.6.1",
"react-dom": "^16.6.1",

Answer 3

Even I faced the same issue but it got resolved. The changes were made in package.json only .Below are the changes done. Try to give exact value for all of these below:

"prop-types": "^15.6.2"
"react": "^15.4.0"
"react-dom": "^15.4.0"

Earlier these were 16.x.x .I just changed to a version lower then 15.5.x which I read somewhere is stable.

After this go to the terminal in my case or cmd in windows and go the folder where your react-app is created ie where node_modules, src are and then press

npm install --save

npm start

This may be helpful to some people.

Answer 4

package only works for react 15 per the github repo. Handling of proptypes changed in 16

Answer 5

Ran into this same problem on another package and decided to downgrade React for now. The problem seems to be caused by a change in React. If you look deeper into the code, it actually complains about:

propTypes: {
  transitionTime: _react2.default.PropTypes.number,

This happens because the way to handle PropTypes has changed. Apparently the old way to handle them has been removed in version 16. You can read more here: https://reactjs.org/docs/typechecking-with-proptypes.html

And possible solutions that I can think of:

• Use an older version of react (like 15.6.1 in the example given by Nandu Kalidindi).

• get the module fixed

Answer 6

Accordion expects an array of children this.props.children with data-trigger according to this https://github.com/glennflanagan/react-responsive-accordion/blob/master/src/Accordion.js#L15.

Modify your render method to something like this so as to provide a valid children props. Or check out this working example WORKING DEMO

render() {
  return (
    <div>
      <Accordion>
        <div data-trigger="A nifty React accordion component">
          <p>So this is an Accordion component that used the <a href="https://github.com/glennflanagan/react-collapsible">react-collapsible</a> component. How handy.</p>
        </div>

        <div data-trigger="What is the difference?" data-trigger-when-open={<div><span style={{color: "yellow"}}>THAT</span> is the difference!</div>}>
          <p>An Accordion is different to a Collapsible in the sense that only one "tray" will be open at any one time.</p>
        </div>       
      </Accordion>    
    </div>
  );
}