Next.js首次运行报错TypeError: Cannot read properties of undefined (reading 'current')

场景回顾 #

使用命令npx create-next-app@latest my-test-app --typescript --tailwind --eslint创建项目，2021款MacBook Pro环境下首次运行即出现该错误，升级next@canary版本、多次重建项目均无法解决。

排查与解决步骤 #

1. 验证Node.js版本兼容性 #

Next.js 13+要求Node.js版本≥18.17或≥20.6（官方推荐LTS版本），旧版本可能引发内部API调用异常：

• 执行node -v查看当前版本，若不满足要求，升级至最新LTS版本
• 推荐用nvm管理版本：nvm install --lts，切换版本后重启项目

2. 清理依赖与构建缓存 #

Mac环境下缓存残留可能导致依赖加载异常，按以下步骤操作：

• 删除依赖目录：rm -rf node_modules
• 删除锁文件（根据使用的包管理器选择）：rm package-lock.json 或 rm yarn.lock 或 rm pnpm-lock.yaml
• 删除Next.js构建缓存：rm -rf .next
• 重新安装依赖：npm install（或yarn install/pnpm install）
• 重启开发服务器：npm run dev

3. 检查Tailwind CSS配置正确性 #

自动生成的Tailwind配置可能存在路径错误：

• 打开tailwind.config.ts，确保content数组包含所有需要样式注入的文件路径：

  /** @type {import('tailwindcss').Config} */
  export default {
    content: [
      './app/**/*.{js,ts,jsx,tsx,mdx}',
      './pages/**/*.{js,ts,jsx,tsx,mdx}',
      './components/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 确认postcss.config.js配置无误：

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  

4. 临时禁用ESLint排查冲突 #

ESLint插件可能与Next.js开发服务器存在兼容性问题：

• 修改next.config.ts，添加ESLint禁用配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    eslint: {
      ignoreDuringBuilds: true,
    },
  }
  
  export default nextConfig
  

• 重启项目，若错误消失，尝试更新ESLint相关依赖：npm update eslint eslint-config-next

5. 修复项目文件夹权限 #

Mac的文件权限限制可能导致Next.js无法读写缓存文件：

• 右键项目文件夹，选择「显示简介」，在「共享与权限」中设置当前用户权限为「读与写」
• 或用命令批量修改权限：chmod -R 755 my-test-app

备选方案 #

若以上步骤均无效，可尝试：

• 切换包管理器（如从npm换成pnpm/yarn）重新安装依赖
• 彻底卸载Node.js后，从官方网站重新安装LTS版本

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