Friday, 27 May 2022

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

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?



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

No comments:

Post a Comment