Next.js - TypeError: Cannot read properties of null (reading 'useMemo')

Question

Since refactoring my code to move generic hooks and components to their own git submodules within my project I get TypeError: Cannot read properties of null (reading 'useMemo') whenever I call one of my custom hooks referring to useMemo.

I removed all the logic from a hook to make sure it didn't come from undefined arguments, so now my file looks like:

import { useMemo } from 'react'

export function useMyCustomHook() {
    return useMemo(() => [], []) // Does nothing useful, but fails anyway
}

export function useMyCustomHookWithoutMemo() {
    return [] // Does nothing useful, doesn't fail
}

I'm using next.js at the lastest version and the project structure is like this:

components/
- component.js (this is where I call useMyCustomHook imported from 'generics')
hooks/
pages/
- index.js (returns component)
generics/
- index.js (with export * from './hooks/useMyCustomHook')
- hooks/
  - useMyCustomHook.js

I also have a jsconfig.json file with the following content, so I can write stuff like import Component from 'components/component':

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Is next.js not compiling code in my generics folder? How can I get useMemo to work with this folder structure?

I tried moving useMyCustomHook.js to the hooks folder and it works there, so I'm guessing it has to do with a webpack config? I don't know much about those, that's why I love next.js

@Hugo I think it's not related to useMemo :/ Maybe somewhere in your code you are trying to get properties of null object. Is it possible to you to share a bit more about the custom hook? — adel
– adel, Commented May 31, 2022 at 6:02
@AdelArmand I thought the same thing, that's why I removed all the logic from both the hook and my component and I still get the TypeError: Cannot read properties of null (reading 'useMemo') as soon as I use useMemo. I can add the practically empty component calling myCustomHook and returning an empty div to the question if you think that'd help, or did you have something else in mind? — Hugo
– Hugo, Commented May 31, 2022 at 13:17

Hugo · Accepted Answer · 2022-06-02 13:37:40Z

4

I started from scratch and moved files one by one into a libs folder, and added paths in jsconfig.json so I wouldn't have long imports into my libs and it seems to work for now. Probably a bug with next.js, webpack and git submodules

answered Jun 2, 2022 at 13:37

Hugo

4793 gold badges11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ricemilk1122 · Accepted Answer · 2022-05-31 19:23:45Z

1

maybe you can add a console line after import line to ensure if useMemo exist. like this:

import { useMemo } from 'react';
console.log(useMemo);

the point is to find the variable whose value is null.

edited May 31, 2022 at 19:23

answered May 31, 2022 at 19:23

Ricemilk1122

363 bronze badges

1 Comment

Hugo Over a year ago

useMemo is null

Nadia Makarevich · Accepted Answer · 2022-06-01 11:29:33Z

1

This might be a case of circular imports in your code. Webpack doesn't handle them well.

Make sure that you're not importing from components folder to generics or hooks. Try to run no-cycle eslint rule on your app, it might help to identify those: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md

answered Jun 1, 2022 at 11:29

Nadia Makarevich

1143 bronze badges

Comments

Ghazi · Accepted Answer · 2022-06-02 01:42:33Z

1

useMemo() is available for react 16.8.6+, So if your react is not updated, you should update it, otherwise, i would try something like:

useMemo(()=>console.log("test),[])

and check dev tab in browser.

answered Jun 2, 2022 at 1:42

Ghazi

7669 silver badges31 bronze badges

Comments

Mikias · Accepted Answer · 2023-01-22 19:59:49Z

1

For me the issue was that had placed the useMemo out of the function component by mistake

answered Jan 22, 2023 at 19:59

Mikias

1412 silver badges5 bronze badges

Comments

Schythed · Accepted Answer · 2023-05-15 16:10:58Z

1

I had the issue of React being null in Next.js 13. I resolved it by adding

experimental: { appDir: false }

to my next.config.js.

Note: This would only apply if you are still using the pages directory and not the app directory.

answered May 15, 2023 at 16:10

Schythed

111 bronze badge

Collectives™ on Stack Overflow

Next.js - TypeError: Cannot read properties of null (reading 'useMemo')

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related