React TypeScript部署Vercel时ESLint引号规则报错求助

一、ESLint引号规则与转义规则不生效的解决步骤 #

• 确认ESLint配置文件的正确性，确保规则关闭配置在rules字段中，示例.eslintrc.json：

{
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "react"],
  "rules": {
    "react/no-unescaped-entities": "off",
    "@typescript-eslint/quotes": "off"
  }
}

• 在package.json中明确lint脚本，确保Vercel部署时执行正确的检查：

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx --fix"
  }
}

• 进入Vercel项目的部署设置，勾选「Disable Build Cache」，强制重新安装依赖并执行lint，避免缓存导致旧配置生效。
• 若使用Next.js，检查next.config.js是否有覆盖ESLint配置的设置，确保自定义规则优先级更高：

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    dirs: ['src'], // 指定lint目录，确保覆盖所有文件
  },
}

module.exports = nextConfig

二、TypeError: Cannot read properties of null (reading 'useMemo')的解决步骤 #

• 定位错误来源：在本地开发环境启动项目，查看浏览器控制台的错误栈信息，找到触发错误的具体文件和代码行。
• 检查Hook调用规范：确保useMemo仅在React组件或自定义Hook的顶层调用，禁止在条件判断、循环、嵌套函数中使用。
• 客户端组件标记：若使用Next.js App Router，确认使用useMemo的组件已添加'use client'指令（服务器组件不支持React Hooks）：

'use client'

import { useMemo } from 'react'

export default function MyComponent() {
  const memoizedValue = useMemo(() => {
    // 逻辑代码
  }, [deps])
  return <div>{memoizedValue}</div>
}

• 版本兼容性检查：确认react、react-dom与项目框架（如Next.js）版本匹配，例如Next.js 13+要求React 18.x，更新依赖：

npm install react@^18.2.0 react-dom@^18.2.0

• 排查第三方库：若错误来自第三方依赖，尝试更新该库版本，或临时移除库测试是否解决问题，定位是否为库的兼容性问题。

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