CODEWITHSUNDEEP
javascriptreactjstypescriptnext.js
thatnewguy8
thatnewguy8

Reputation: 161

NextJS TypeError: Cannot read properties of null (reading 'length')

Anyone know the cause of this error?

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)

I have tried commenting out any components running in pages and creating a new NextJS-ts project from scratch but the error persists.

Upvotes: 10

Views: 5128

Answers (4)

Yilmaz
Yilmaz

Reputation: 49321

I checked this directory:"./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:262:55" in v "13.0.1" and v"13.0.3". In both this function is defined same:

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
     }

this is just definition of the function. But difference is when call it: In v"13.0.1", this is how they call

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

in v"13.0.3", they made a type checking first

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

Probably it was a bug in your next.js version. if you use v"13.0.3", it should work

Upvotes: 0

Jordan
Jordan

Reputation: 1

I ran into this same issue. I was also following the tutorial with the exception of creating an about page instead of an index. When I used a regular function in about.js I received the same error. The function looked like this:

function AboutPage() {
    return <div>The About Page</div>;
}

export default AboutPage;

When I changed it to an arrow function the error went away. The arrow function looked like this:

const AboutPage = () => {
    return <div>The About Page and Stuff</div>;
}

export default AboutPage;

I'm not sure why next threw an error on the regular function, but changing it to an arrow functions seems to have done the trick.

Upvotes: -3

Zackery96
Zackery96

Reputation: 1

Instead of using export default function Page(){}

Change this to an es6 function const Page = () => {}

And add export default Page to the bottom. I did this for the Layout as well.

This worked for me somehow :)

Upvotes: -1

nvk
nvk

Reputation: 371

Yeah, seems like a next 13 bug. It doesn't seem to be breaking anything that I can tell.

It is probably the following const hasUpdates = Boolean(updatedModules.length); just needs to be const hasUpdates = Boolean(updatedModules && updatedModules.length);

Upvotes: 5

Related Questions