导入“React-Magnific-Popup”包时出现错误“TypeError：无法读取未定义的属性‘对象’”

Question

我正在使用 react-magnific-popup 包，但是当我从该包中导入任何内容时，出现此错误“类型错误：无法读取未定义的属性‘对象’”

./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

我所做的只是将 Magnific Popup 导入某个组件，但正如我在此日志中看到的，错误出在包本身中，或者我的应用程序可能不支持此包。

我怎么解决这个问题？

Answer 1

我也面临同样的问题。我将按照以下步骤解决此问题。1）安装道具类型；2) 在以下文件中声明 PropTypes 'var PropTypes = require('prop-types');' 。i) SingleImage.js, LightBoxGallery.js, Popup.js.也替换

_react2['default'].PropTypes。进入 PropTypes。

对于所有道具类型。3）重建你的项目..工作正常。