title: Next.js - TypeError: Cannot read properties of null (reading 'useMemo')
body: <p>Since refactoring my code to move generic hooks and components to their own git submodules within my project I get <code>TypeError: Cannot read properties of null (reading 'useMemo')</code> whenever I call one of my custom hooks referring to <code>useMemo</code>.</p>
  <p>I removed all the logic from a hook to make sure it didn't come from undefined arguments, so now my file looks like:</p>
  <pre><code>import { useMemo } from 'react'
  
  export function useMyCustomHook() {
      return useMemo(() =&gt; [], []) // Does nothing useful, but fails anyway
  }
  
  export function useMyCustomHookWithoutMemo() {
      return [] // Does nothing useful, doesn't fail
  }
  </code></pre>
  <p>I'm using next.js at the lastest version and
  the project structure is like this:</p>
  <ul>
  <li>components/
  <ul>
  <li>component.js (this is where I call <code>useMyCustomHook</code> imported from 'generics')</li>
  </ul>
  </li>
  <li>hooks/</li>
  <li>pages/
  <ul>
  <li>index.js (returns component)</li>
  </ul>
  </li>
  <li>generics/
  <ul>
  <li>index.js (with <code>export * from './hooks/useMyCustomHook'</code>)</li>
  <li>hooks/
  <ul>
  <li>useMyCustomHook.js</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p>I also have a jsconfig.json file with the following content, so I can write stuff like <code>import Component from 'components/component'</code>:</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;baseUrl&quot;: &quot;.&quot;
    }
  }
  </code></pre>
  <p>Is next.js not compiling code in my generics folder? How can I get <code>useMemo</code> to work with this folder structure?</p>
  <p>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</p>