javascript - NextJS TypeError: לא ניתן לקרוא תכונות של null (קריאת 'length')

מישהו יודע מה הסיבה לשגיאה הזו?

warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works      
TypeError: Cannot read properties of null (reading 'length')
    at eval (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:262:55)

ניסיתי להעיר הערות על כל הרכיבים שרצים בדפים וליצור פרויקט NextJS-ts חדש מאפס, אך השגיאה נמשכת.

תשובה #1

כן, נראה כמו באג ב-Next 13. לא נראה שהוא שובר משהו שביכולתי לראות.

זה כנראה רק צריך להיות const hasUpdates=Boolean(updatedModules && updatedModules.length); במקום const hasUpdates=Boolean(updatedModules.length);

תשובה #2

בדקתי את התיקייה הזו: "./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:262:55" בגרסה "13.0.1" ובגרסה "13.0.3". בשתיהן הפונקציה מוגדרת אותו דבר:

function tryApplyUpdates(onHotUpdateSuccess) {
    if (!module.hot) {
       // HotModuleReplacementPlugin is not in Webpack configuration.
       console.error('HotModuleReplacementPlugin is not in Webpack configuration.');
       // window.location.reload();
       return;
    }
    if (!isUpdateAvailable() || !canApplyUpdates()) {
        (0, _client).onBuildOk();
        return;
        }

   function handleApplyUpdates(err, updatedModules) {
        if (err || hadRuntimeError || !updatedModules) {
            if (err) {
                console.warn('[Fast Refresh] performing full reload\n\n' + "Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree.\n" + 'You might have a file which exports a React component but also exports a value that is imported by a non-React component file.\n' + 'Consider migrating the non-React component export to a separate file and importing it into both files.\n\n' + 'It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.\n' + 'Fast Refresh requires at least one parent function component in your React tree.');
            } else if (hadRuntimeError) {
                console.warn('[Fast Refresh] performing full reload because your application had an unrecoverable error');
            }
            performFullReload(err);
            return;
        }
        const hasUpdates = Boolean(updatedModules.length);
        if (typeof onHotUpdateSuccess === 'function') {
            // Maybe we want to do something.
            onHotUpdateSuccess(hasUpdates);
        }
        if (isUpdateAvailable()) {
            // While we were updating, there was a new update! Do it again.
            // However, this time, don't trigger a pending refresh state.
            tryApplyUpdates(hasUpdates ? undefined : onBeforeHotUpdate, hasUpdates ? _client.onBuildOk : onHotUpdateSuccess);
        } else {
            (0, _client).onBuildOk();
            if (process.env.__NEXT_TEST_MODE) {
                afterApplyUpdates(()=>{
                    if (self.__NEXT_HMR_CB) {
                        self.__NEXT_HMR_CB();
                        self.__NEXT_HMR_CB = null;
                    }
                });
            }
        } 
        // in here its call handleApplyUpdates
     }

זוהי רק הגדרת הפונקציה. אבל ההבדל הוא כאשר קוראים לה: בגרסה "13.0.1", ככה הם קוראים לה

module.hot.check(/* autoApply */ true).then((updatedModules)=>{
    // without any check "updatedModules" is just passed assumet it is an array
    handleApplyUpdates(null, updatedModules);
}, (err)=>{
    handleApplyUpdates(err, null);
});

בגרסה v"13.0.3", הם עשו בדיקת סוג קודם

 module.hot.check(/* autoApply */ false).then((updatedModules)=>{
        if (typeof onBeforeHotUpdate === 'function') {
            const hasUpdates = Boolean(updatedModules.length);
            onBeforeHotUpdate(hasUpdates);
        }
        return module.hot.apply();
    }).then((updatedModules)=>{
        handleApplyUpdates(null, updatedModules);
    }, (err)=>{
        handleApplyUpdates(err, null);
    });

כנראה שזה היה בבאג בגרסת ה-next.js שלך. אם אתה משתמש בגרסה "13.0.3", זה אמור לעבוד