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

Answer 1

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