React自定义Hook报错：useScrollPosition不是函数求助

问题场景 #

编写了带"use client"指令的useScrollPosition Hook：

"use client";
import { useEffect, useState } from "react";

export const useScrollPosition = () => {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const updatePosition = () => {
      setScrollPosition(window.pageYOffset);
    };

    window.addEventListener("scroll", updatePosition);
    updatePosition();

    return () => window.removeEventListener("scroll", updatePosition);
  }, []);

  return scrollPosition;
};

export default useScrollPosition;

在Header组件中导入使用时出现报错：Error: _app_hooks_useScrollPosition__WEBPACK_IMPORTED_MODULE_3___default(...) is not a function，已尝试修改文件后缀（tsx/ts/js）、确认导入路径正确，但问题依旧，且代码在其他项目可正常运行。

可行解决方案 #

1. 给使用Hook的组件添加"use client"声明 #

如果是在Next.js 13+ App Router环境下，默认组件是Server Component，无法直接调用客户端Hook。必须给Header组件文件也添加"use client"指令，将其声明为Client Component：

"use client"; // 必须添加这一行
import useScrollPosition from "../app/hooks/useScrollPosition";

export function Header() {
  const scrollPosition = useScrollPosition();
  console.log(scrollPosition);
  // 其他组件逻辑
}

2. 统一导出/导入方式，避免混合导出 #

Hook文件同时使用了命名导出和默认导出，可能导致编译解析混淆。可以统一为其中一种方式：

• 方案一：仅保留默认导出
  修改Hook文件：

  "use client";
  import { useEffect, useState } from "react";
  
  const useScrollPosition = () => {
    // 原逻辑不变
  };
  
  export default useScrollPosition;
  

• 方案二：仅保留命名导出，修改导入方式
  修改Hook文件：

  "use client";
  import { useEffect, useState } from "react";
  
  export const useScrollPosition = () => {
    // 原逻辑不变
  };
  

  组件中对应修改导入：

  "use client";
  import { useScrollPosition } from "../app/hooks/useScrollPosition"; // 用花括号导入命名导出
  

3. 清理缓存并重启开发服务器 #

Next.js的开发缓存可能导致模块解析异常，执行以下操作：

• 停止当前开发服务器（Ctrl+C）
• 删除项目根目录下的.next文件夹和node_modules/.cache目录
• 可选：重新执行npm install或yarn install
• 重启开发服务器（npm run dev或yarn dev）

4. 检查tsconfig.json配置正确性 #

确保tsconfig.json的compilerOptions包含React相关的正确配置，示例如下：

{
  "compilerOptions": {
    "jsx": "preserve",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "strict": true,
    "esModuleInterop": true
  }
}

内容的提问来源于stack exchange，提问作者Inova