SWR/Next.js报错：TypeError: useSWR不是函数

核心原因及解决方案 #

• SWR v2版本的导入方式变更
  SWR从v2开始不再默认导出useSWR，而是采用命名导出。你的代码里用了默认导入import useSWR from 'swr';，这在v2版本中会导致导入的是一个包含useSWR的对象，而非钩子函数本身。
  修正方法：改成命名导入：

  import { useSWR } from 'swr';
  

• 检查依赖版本
  打开package.json查看swr版本，如果是^2.0.0及以上，必须使用命名导入。如果需要保留v1的使用方式，可以指定安装v1版本：

  npm install swr@1.x
  

• 清理依赖缓存
  若依赖解析存在缓存问题，尝试删除依赖文件重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

修正后的完整代码 #

"use client"
import { useSWR } from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const HebdoCirculaireContainer = ({title}) => {
    
    const {data, isLoading, error} = useSWR('https://api.kfarhbab.sscc.app/v1/website/circular?month=1', fetcher);

    console.log(data);

    // 组件必须返回JSX，原代码缺少return语句，补充基础结构
    return (
        <div>
            <h2>{title}</h2>
            {isLoading && <p>加载中...</p>}
            {error && <p>加载失败</p>}
            {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
        </div>
    )
}

export default HebdoCirculaireContainer;

注：原代码还存在两处语法问题：函数结尾的)应为}，且组件未返回JSX，修正后已一并处理。

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