Cannot read property 'number' of undefined Error

[kit426]

I'm trying to add motionmenu to a new react project. When I add the following I get the following error. I've tried the both versions 0.3.0 and the latest but both give the same error. Am I doing something wrong?

`<MotionMenu type="circle" margin={120} y={0} x={0} >

<div className="button"><i className="fa fa-cogs" /></div>
<div className="button"><i className="fa fa-cloud" /></div>
<div className="button"><i className="fa fa-home" /></div>
<div className="button"><i className="fa fa-flash" /></div>
<div className="button"><i className="fa fa-heart" /></div>
<div className="button"><i className="fa fa-globe" /></div>
<div className="button"><i className="fa fa-plug" /></div>

`

ERROR: × TypeError: Cannot read property 'number' of undefined ./node_modules/react-motion-menu/lib/item.js C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/node_modules/react-motion-menu/lib/item.js:165 162 | 163 | 164 | MenuItem.propTypes = {

165 | x: _react.PropTypes.number.isRequired, 166 | y: _react.PropTypes.number.isRequired, 167 | direction: _react.PropTypes.oneOf(['vertical', 'horizontal']).isRequired, 168 | distance: _react.PropTypes.number.isRequired, View compiled webpack_require http://localhost:3000/static/js/bundle.js:679:30 676 | /**/ }; 677 | /**/ 678 | /**/ // Execute the module function 679 | /**/ modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 680 | /**/ 681 | /**/ // Flag the module as loaded 682 | /**/ module.l = true; View source fn C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:88 85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 86 | hotCurrentParents = []; 87 | } 88 | return webpack_require(request); 89 | }; 90 | var ObjectFactory = function ObjectFactory(name) { 91 | return { View compiled ./node_modules/react-motion-menu/lib/index.js C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/node_modules/react-motion-menu/lib/index.js:15 12 | 13 | var _reactMotion = require('react-motion'); 14 | 15 | var _item = require('./item'); 16 | 17 | var _item2 = _interopRequireDefault(_item); 18 | View compiled webpack_require C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:678 675 | }; 676 | 677 | // Execute the module function 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 679 | 680 | // Flag the module as loaded 681 | module.l = true; View compiled fn C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:88 85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 86 | hotCurrentParents = []; 87 | } 88 | return webpack_require(request); 89 | }; 90 | var ObjectFactory = function ObjectFactory(name) { 91 | return { View compiled ./src/containers/app/index.js http://localhost:3000/static/js/bundle.js:65989:76 webpack_require C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:678 675 | }; 676 | 677 | // Execute the module function 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 679 | 680 | // Flag the module as loaded 681 | module.l = true; View compiled fn C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:88 85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 86 | hotCurrentParents = []; 87 | } 88 | return webpack_require(request); 89 | }; 90 | var ObjectFactory = function ObjectFactory(name) { 91 | return { View compiled ./src/index.js http://localhost:3000/static/js/bundle.js:66514:74 webpack_require C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:678 675 | }; 676 | 677 | // Execute the module function 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 679 | 680 | // Flag the module as loaded 681 | module.l = true; View compiled fn C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:88 85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 86 | hotCurrentParents = []; 87 | } 88 | return webpack_require(request); 89 | }; 90 | var ObjectFactory = function ObjectFactory(name) { 91 | return { View compiled 0 http://localhost:3000/static/js/bundle.js:66776:18 webpack_require__ C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:678 675 | }; 676 | 677 | // Execute the module function 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 679 | 680 | // Flag the module as loaded 681 | module.l = true; View compiled ./node_modules/ansi-regex/index.js.module.exports C:/Users/Kristen/Desktop/Temp Pull From External Drive/Projects/WebApplication_SS/WebApplication_SS/react-app/webpack/bootstrap c756a603d86a7ec04051:724 721 | webpack_require.h = function() { return hotCurrentHash; }; 722 | 723 | // Load entry module and return exports 724 | return hotCreateRequire(0)(webpack_require__.s = 0); 725 | 726 | 727 | View compiled (anonymous function) http://localhost:3000/static/js/bundle.js:728:10 This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

[dandonahoe]

I'm getting the same thing. Currently running react 16.1.0

[NCarteazy]

Same here as well. This only occurred after moving to React 16.

[Nyura95]

idem for me, react 16.1.0

i remove manually the props required and it's working for me. by hearing the fix ^^

[jordancoil]

I think this is because React.PropTypes has moved to a different package since 15.5. It says to use https://www.npmjs.com/package/prop-types instead.