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

Posted 2023-05-07

【中文标题】更新 Node JS 后 MaterializeCSS 轮播方法停止工作

【英文标题】：MaterializeCSS carousel methods stopped working after I updated my Node JS

【发布时间】：2021-12-14 03:01:49

【问题描述】：

我正在开发一个具有 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  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  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  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;

【参考方案1】：

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