Next.js - 类型错误：无法读取 null 的属性（读取“useMemo”）

Question

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

我从一个钩子中删除了所有逻辑以确保它不是来自未定义的 arguments，所以现在我的文件如下所示：

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（这是我调用从“泛型”导入的useMyCustomHook的地方）
• 挂钩/
• 页/
  • index.js（返回组件）
• 仿制药/
  • index.js（使用export * from './hooks/useMyCustomHook' ）
  • 挂钩/
    • 使用MyCustomHook.js

我还有一个包含以下内容的 jsconfig.json 文件，因此我可以编写类似import Component from 'components/component' ：

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

next.js不是在我的generics文件夹里编译代码吗？ 我怎样才能让useMemo使用这个文件夹结构？

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

Answer 1

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

Answer 2

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

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

关键是找到值为空的变量。

Answer 3

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

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

Answer 4

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

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

并检查浏览器中的开发选项卡。

Answer 5

对我来说，问题是错误地将 useMemo 放在了 function 组件之外