Get error "TypeError: Cannot read property 'object' of undefined" when import "React-Magnific-Popup" package

Question

I'm using react-magnific-popup package, but when I import anything from that package I get this error "TypeError: Cannot read property 'object' of undefined"

./node_modules/react-magnific-popup/lib/SingleImage.js
node_modules/react-magnific-popup/lib/SingleImage.js:59
  56 | exports.SingleImage = SingleImage;
  57 | 
  58 | SingleImage.propTypes = {
> 59 |  config: _react2['default'].PropTypes.object.isRequired,
  60 |  className: _react2['default'].PropTypes.string.isRequired,
  61 |  href: _react2['default'].PropTypes.string.isRequired,
  62 |  children: _react2['default'].PropTypes.element.isRequired,
View compiled
__webpack_require__
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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-magnific-popup/lib/ReactMagnificPopup.js
node_modules/react-magnific-popup/lib/ReactMagnificPopup.js:7
   4 |   value: true
   5 | });
   6 | 
>  7 | var _SingleImage = require('./SingleImage');
   8 | 
   9 | Object.defineProperty(exports, 'SingleImage', {
  10 |   enumerable: true,
View compiled
__webpack_require__
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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/pages/artistsPage/artists.js
http://localhost:3000/static/js/bundle.js:65258:79
__webpack_require__
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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/App.js
http://localhost:3000/static/js/bundle.js:59016:85
__webpack_require__
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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:62672:63
__webpack_require__
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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:68288:18
__webpack_require__
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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
/Users/user/Desktop/reactProjs/juz/webpack/bootstrap 9134a036f8ac4d969428: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

All I did is just imported Magnific Popup to some Component, but as I see in this log, error is in package itself or maybe my application can not support this package.

How can I solve this problem?

Answer 1

i'm also facing same issue. I'll resolve this by following this steps. 1) Install prop-types; 2) declare PropTypes 'var PropTypes = require('prop-types');' into following files. i) SingleImage.js, LightBoxGallery.js, Popup.js. also replace

_react2['default'].PropTypes. into PropTypes.

for all prop types. 3) rebuild your project.. working fine.