Desde que refactoricé mi código para mover ganchos y componentes genéricos a sus propios submódulos git dentro de mi proyecto, obtengo TypeError: Cannot read properties of null (reading 'useMemo') cada vez que llamo a uno de mis ganchos personalizados que se refieren a useMemo .
Eliminé toda la lógica de un enlace para asegurarme de que no proviniera de argumentos indefinidos, por lo que ahora mi archivo se ve así:
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 }Estoy usando next.js en la última versión y la estructura del proyecto es así:
useMyCustomHook importado de 'genéricos')export * from './hooks/useMyCustomHook' ) También tengo un archivo jsconfig.json con el siguiente contenido, así que puedo escribir cosas como import Component from 'components/component' :
{ "compilerOptions": { "baseUrl": "." } } ¿Next.js no compila el código en mi carpeta de genéricos? ¿Cómo puedo hacer que useMemo funcione con esta estructura de carpetas?
Intenté mover useMyCustomHook.js a la carpeta de ganchos y funciona allí, así que supongo que tiene que ver con una configuración de paquete web. No sé mucho sobre eso, por eso me encanta next.js
Comencé desde cero y moví los archivos uno por uno a una carpeta libs , y agregué paths en jsconfig.json para no tener importaciones largas en mis libs y parece funcionar por ahora. Probablemente un error con los submódulos next.js, webpack y git
tal vez pueda agregar una línea de consola después de la línea de importación para asegurarse de que useMemo exista. como esto:
import { useMemo } from 'react'; console.log(useMemo);el punto es encontrar la variable cuyo valor es nulo.
Este podría ser un caso de importaciones circulares en su código. Webpack no los maneja bien.
Asegúrese de no importar desde la carpeta de components a genéricos o ganchos. Intente ejecutar la regla eslint no-cycle en su aplicación, podría ayudar a identificarlos: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md