Pesquisa de site

javascript - NextJS TypeError: Não é possível ler propriedades de null (lendo 'length')

Alguém sabe a causa desse erro?

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)

Eu tentei comentar qualquer componente em execução nas páginas e criar um novo projeto NextJS-ts do zero, mas o erro persiste.

Resposta #1

Sim, parece um bug do Next 13. Não parece estar quebrando nada que eu possa perceber.

Provavelmente, é o seguinte const hasUpdates=Boolean(updatedModules.length); que só precisa ser const hasUpdates=Boolean(updatedModules && updatedModules.length);

Resposta #2

Eu verifiquei este diretório: "./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:262:55" na versão "13.0.1" e na versão "13.0.3". Em ambas, esta função está definida da mesma forma:

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
     }

esta é apenas a definição da função. Mas a diferença é quando ela é chamada: No v"13.0.1", é assim que eles chamam

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);
});

na v"13.0.3", eles fizeram uma verificação de tipo primeiro

 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);
    });

Provavelmente foi um bug na sua versão do next.js. Se você usar a v"13.0.3", deveria funcionar

Artigos relacionados