我之前在Next.js项目里折腾Chakra UI的时候也碰到过一模一样的报错，给你几个亲测有效的排查和解决步骤：

• 先确认依赖是否真的安装到位
  有时候安装命令看似成功，但可能存在缓存或静默失败的情况。你可以去项目根目录的node_modules文件夹里找@chakra-ui目录，看看里面有没有react子文件夹。如果没有，试试彻底清理后重新安装：

  rm -rf node_modules package-lock.json
  npm install @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
  

• 检查TypeScript配置（TS项目必看）
  报错里提到了类型声明，说明你在用TypeScript。打开tsconfig.json，确保compilerOptions里的moduleResolution设为node，同时baseUrl配置正确（如果有设置的话）：

  {
    "compilerOptions": {
      "moduleResolution": "node",
      "baseUrl": ".",
      // 其他配置项...
    }
  }
  

  注意：@chakra-ui/react自带类型声明，不需要额外安装@types/chakra-ui-react，别画蛇添足哦。

• 清除Next.js和npm的缓存
  Next.js的缓存有时候会“记住”旧的模块状态，导致新安装的依赖不被识别。执行以下命令清空缓存：

  npx next clean
  npm cache clean --force
  

  然后重启你的开发服务器，再尝试导入Chakra组件。

• 检查Next.js版本兼容性
  @chakra-ui/react v2及以上版本要求Next.js 12.1.0或更高版本。你可以打开package.json查看next的版本，如果版本过低，升级试试：

  npm install next@latest
  

• 别混用包管理器
  如果你之前用过yarn或pnpm，后来换成npm，可能会导致依赖冲突。确保全程只用一种包管理器，比如用npm就别碰yarn，避免出现依赖安装不一致的问题。

如果以上步骤都试过还是不行，可以把package.json里的依赖部分和你的Next.js版本贴出来，这样能更精准地定位问题。

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