执行next lint时返回JSX的函数触发@typescript-eslint/no-empty-function错误

问题 #

执行next lint脚本时，返回JSX的RootLayout函数明明非空，却触发了@typescript-eslint/no-empty-function规则检测，同时抛出Cannot read properties of undefined (reading 'getTokens')错误。即使在eslintrc.js中将该规则设为0（禁用），报错依然存在。

相关代码 #

export default function RootLayout({
  children
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.variable}>{children}</body>
    </html>
  );
}

错误信息 #

Cannot read properties of undefined (reading 'getTokens')
Occurred while linting /Users/najaewan/Desktop/f-lab/clothesgpt/packages/clothes_gpt/app/layout.tsx:16
Rule: "@typescript-eslint/no-empty-function"
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

解决方案 #

1. 确认ESLint配置生效 #

检查eslintrc.js的rules配置，确保规则禁用设置正确且未被覆盖：

module.exports = {
  // 其他配置...
  rules: {
    "@typescript-eslint/no-empty-function": "off", // 或0，确保写在rules对象内
    // 其他规则...
  }
};

如果配置中extends包含plugin:@typescript-eslint/recommended这类预设，需要显式将该规则设为off，因为预设可能默认启用了它。

2. 统一@typescript-eslint依赖版本 #

getTokens未定义的错误通常是@typescript-eslint/eslint-plugin和@typescript-eslint/parser版本不匹配导致的规则内部bug。检查项目的package.json，确保这两个包版本一致，不一致的话执行升级/降级操作：

# 统一升级到最新兼容版本
yarn add @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --dev

3. 清除ESLint缓存 #

Next.js的ESLint会缓存检测结果，可能导致禁用规则的配置未生效。执行带--no-cache参数的lint命令：

next lint --no-cache

4. 检查Monorepo配置冲突 #

如果是Monorepo项目，确认根目录与子包的ESLint配置是否存在冲突。子包的eslintrc.js是否正确继承了根配置，或者有没有单独的配置覆盖了规则设置。

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