更新 Node JS 后 MaterializeCSS 轮播方法停止工作

Question

我正在开发一个具有 materialize-css 轮播的 React 项目。但是，我注意到在我将 nodeJS 从 14.8.1 更新到 16.13.0 后，我不断收到以下错误：

TypeError: Cannot read properties of undefined (reading 'next')

和

TypeError: Cannot read properties of undefined (reading 'set')

这是我的代码：

import '../css/successAnimate.css'
import M from 'materialize-css';

const HomeContents = () => {
    document.addEventListener('DOMContentLoaded', function() {
        // Initialising mterialise-css functions
        var elemsCarousel = document.querySelectorAll('.carousel');
        M.Carousel.init(elemsCarousel);

        M.Carousel.getInstance(elemsCarousel).set(2);

        window.setInterval(function () {
            M.Carousel.getInstance(elemsCarousel).next()
        }, 2000)
    });


    return ( 
        <div className="contents">

            {/* --==== Customer-Testimonials  ====-- */}
            <section id="customer-testimonials" className="mid-sec2">
                <div className="row">
                    <div className="container">
                        <div className="customer-sect-title">
                            <h3 className="sect-title">Customer Testimonials</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            </p>
                        </div>

                        <div className="carousel testimony-wrapper visible-xs">
                            <div className="testimony-block carousel-item">
                                <div className="flex-div review-title">
                                    <img src={require("../images/rp-1.svg").default} alt="points" className="rti-1" />
                                    <span className="bold">Lorem ipsum dolor</span>
                                </div>
                                <div className="review-container">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                    </p>
                                </div>
                                <div className="reviewer-details">
                                    <div className="reviewer-name">
                                        <b>Christiana</b>
                                    </div>
                                    {/* <div className="reviewer-title"></div> */}
                                </div>
                            </div>
                            <div className="testimony-block carousel-item">
                                <div className="flex-div review-title">
                                    <img src={require("../images/rp-1.svg").default} alt="points" className="rti-1" />
                                    <span className="bold">Torem ipsum dolort</span>
                                </div>
                                <div className="review-container">
                                    <p>
                                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                    </p>
                                </div>
                                <div className="reviewer-details">
                                    <div className="reviewer-name">
                                        <b>Abubakar</b>
                                    </div>
                                    {/* <div className="reviewer-title"></div> */}
                                </div>
                            </div>
                            <div className="testimony-block carousel-item">
                                <div className="flex-div review-title">
                                    <img src={require("../images/rp-1.svg").default} alt="points" className="rti-1" />
                                    <span className="bold">Cupidatat non proident</span>
                                </div>
                                <div className="review-container">
                                    <p>
                                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                </div>
                                <div className="reviewer-details">
                                    <div className="reviewer-name">
                                        <b>Chinedu Nwaiwu</b>
                                    </div>
                                    {/* <div className="reviewer-title"></div> */}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            {/* --==== end of Customer-Testimonials  ====-- */}

        </div>
    );
}
 
export default HomeContents;

Answer 1

• 确保您安装的软件包也已更新。
• 您可以（如果安装了 nvm）切换到旧版本的 nodejs，这是我目前为 reactjs 项目所做的。