求助：导入react-magnific-popup包时出现TypeError错误

嘿，这个问题我太熟了！你遇到的报错是因为react-magnific-popup这个包还在使用React旧版的PropTypes API，而你项目里的React版本应该是v15.5或者更高——从v15.5开始，React就把PropTypes从核心库中剥离出来，单独放到了prop-types包中，原来的React.PropTypes已经被彻底移除了。所以当这个旧包尝试访问_react2['default'].PropTypes.object时，PropTypes本身就是undefined，自然就会抛出"Cannot read property 'object' of undefined"的错误。

下面给你两个解决方案，按需选择：

方案一：临时兼容（快速修复） #

如果你不想替换包，只想快速解决这个问题，可以通过以下步骤让旧包适配新版React：

1. 先安装prop-types依赖包：

npm install prop-types --save
# 或者用yarn的话
yarn add prop-types

2. 在项目的入口文件（比如src/index.js）最顶部添加这段代码，把PropTypes挂载到React对象上，模拟旧版的API：

import React from 'react';
import PropTypes from 'prop-types';

// 为旧包提供兼容的PropTypes对象
React.PropTypes = PropTypes;

这样react-magnific-popup就能找到它需要的React.PropTypes，报错就会消失了。

方案二：替换为维护活跃的组件（长期推荐） #

说实话，react-magnific-popup已经很久没有更新了，依赖的都是过时的React API，后续可能还会遇到其他兼容问题。推荐你换成更现代、维护更积极的替代组件：

• react-image-lightbox：专注图片弹窗的轻量组件，完美支持新版React
• react-modal-image：简单易用的图片模态框，支持缩放、旋转等常用功能
• 如果你特别喜欢Magnific Popup的原生功能，也可以直接使用原生的magnific-popup库，自己封装一个React组件，这样更灵活，也能彻底避免依赖过时包的问题。

你提供的完整报错栈： #

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

内容的提问来源于stack exchange，提问作者Erbol Syzdykov