ReactJS - 元素类型无效，期望一个字符串但未定义

Question

我正在尝试使用此package来对react组件使用滚动锁定。

当我运行构建时，我收到以下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

我正按照建议导入软件包，我已经检查了软件包的源文件，以确保它没有被其他名称命名并且导出它：

exports.default = ScrollLock;

我该如何解决这个问题？

这是我的组件代码：

import React from 'react';
import PropTypes from 'prop-types';
import ReactSVG from 'react-svg';
import Slider from 'react-slick';
import ScrollLock from 'react-scroll-lock-component';

import MobileSVG from '../../../assets/svg/icons/Mobile_Icon_Option2.svg';
import TabletSVG from '../../../assets/svg/icons/Tablet_Icon_Option2.svg';
import DesktopSVG from '../../../assets/svg/icons/Desktop_Icon_Option2.svg';

import styles from './styles.css';

const deviceIcons = {'mobile': MobileSVG, 'tablet': TabletSVG, 'desktop': DesktopSVG};

import BackToTopButton from '../BackToTopButton';

export default class ProductComponent extends React.Component {
    constructor(props) {
        super(props);
        this.scroll = this.scroll.bind(this);
    }

    scroll(y){
        y > 0 ? (
           this.slider.slickNext()
        ) : (
           this.slider.slickPrev()
        )
    }

    componentWillMount(){
        window.addEventListener('wheel', function(e){
            //this.scroll(e.wheelDelta);
        })
    }

    render() {
        const {productData} = this.props

        //Slider settings
        const settings = {
            dots: true,
            infinite: false,
            speed: 500,
            fade: true,
            arrows: false,
            centerMode: true,
            slidesToShow: 1,
            slidesToScroll: 1
        }

        //Slider items
        const sliderItems = productData.map((obj, i) => {
            return (
                <div className="product-component row" key={i}>
                    <div className="product-component-image-wrap col-xs-12 col-sm-8">
                        <span className="product-heading">{obj.category}</span>
                        <div className="product-detail-wrap">
                            <img className="product-component-image" src={`${process.env.DB_URL}${obj.image}`} />
                            <ul className="list-device-support">
                                {obj.categoryDeviceSupport.map((obj, i) => {
                                    return (<li key={i}>
                                        <span className="svg-icon">
                                            <ReactSVG path={deviceIcons[obj.value]} />
                                        </span>
                                        <span className="product-label">{obj.label}</span>
                                    </li>)
                                })}
                            </ul>
                        </div>
                    </div>
                    <div className="product-component-info col-xs-12 col-sm-3"> 
                        <span className="align-bottom">{obj.title}</span>
                        <p className="align-bottom">{obj.categoryBrief}</p>
                    </div>
                </div>
            )
        });
        return (
            <div className="product-component-wrap col-xs-12">
                <ScrollLock>
                    <Slider {...settings} ref={slider => this.slider = slider}>
                        {sliderItems}
                    </Slider>
                    <BackToTopButton scrollStepInPx="50" delayInMs="7" />
                </ScrollLock>
            </div>
        )
    }
}

ProductComponent.propTypes = {
    productData: PropTypes.array
};

ProductComponent.defaultProps = {
    productData: []
};