Next.js

Question

自从重构我的代码以将通用挂钩和组件移动到我的项目中它们自己的 git 子模块后，每当我调用我的自定义挂钩之一引用 useMemo 时，我都会得到 TypeError: Cannot read properties of null (reading 'useMemo')。

我从一个钩子中删除了所有逻辑以确保它不是来自未定义的参数，所以现在我的文件看起来像：

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
}

我使用的是 next.js 的最新版本并且项目结构是这样的：

组件/
- component.js（这是我调用从'generics'导入的useMyCustomHook的地方）
挂钩/
页数/
- index.js（returns 分量）
仿制药/
- index.js（含 export * from './hooks/useMyCustomHook'）
- 挂钩/
  - useMyCustomHook.js

我还有一个包含以下内容的 jsconfig.json 文件，所以我可以写 import Component from 'components/component':

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

next.js 不是在我的泛型文件夹中编译代码吗？如何让 useMemo 使用此文件夹结构？

我尝试将 useMyCustomHook.js 移动到 hooks 文件夹并且它在那里工作，所以我猜它与 webpack 配置有关？我不太了解这些，这就是我喜欢 next.js

的原因

Answer 1

也许你可以在导入行之后添加一个控制台行来确保 useMemo 是否存在。像这样：

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

重点是找到值为null的变量。

Answer 2

这可能是您的代码中存在循环导入的情况。 Webpack 不能很好地处理它们。

确保您没有从 components 文件夹导入泛型或挂钩。尝试在您的应用程序上使用运行 no-cycle eslint 规则，它可能有助于识别那些：https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md

Answer 3

useMemo() 适用于 React 16.8.6+，所以如果你的 React 没有更新，你应该更新它，否则，我会尝试类似的东西：

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

并在浏览器中查看开发选项卡。

Answer 4

我从头开始，将文件一个一个地移动到 libs 文件夹中，并在 jsconfig.json 中添加了 paths，这样我就不会在我的库中导入很长时间了，它似乎现在工作。可能是 next.js、webpack 和 git 子模块

的错误

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

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

javascript

reactjs

react-hooks

typeerror