Menu
I don't understand why the function that returns JSX is being linted with the rule "@typescript-eslint/no-empty-function" when running the "next lint" script.
The code at line 16 of the layout.tsx file is as follows:
export default function RootLayout({
children
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.variable}>{children}</body>
</html>
);
}
As you can see, the function is not empty, and it does not violate the "@typescript-eslint/no-empty-function" rule. However, the following error message occurs:
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.
I also considered the possibility of a misconfigured eslintrc.js file, but I couldn't figure out the cause.
const path = require('path');
module.exports = {
root: true,
parserOptions: {
project: ['./packages/*/tsconfig.json', 'typescript-eslint/parser'],
ecmaVersion: 2018,
sourceType: 'module'
},
extends: [
'next/core-web-vitals',
'plugin:@next/next/recommended',
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
'prettier',
'plugin:@typescript-eslint/recommended-requiring-type-checking'
],
plugins: ['@typescript-eslint', 'react', 'react-hooks', 'prettier', 'jest'],
parser: '@typescript-eslint/parser',
rules: {
'@typescript-eslint/no-floating-promises': 'error',
'@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
'@typescript-eslint/no-empty-function': 0,
'@typescript-eslint/explicit-function-return-type': 0,
'@typescript-eslint/no-var-requires': 0,
'@typescript-eslint/interface-name-prefix': 0,
'@typescript-eslint/no-empty-interface': 'error',
'@typescript-eslint/no-use-before-define': 0,
'@typescript-eslint/no-non-null-assertion': 'error',
'@typescript-eslint/explicit-module-boundary-types': 0,
'@typescript-eslint/no-explicit-any': 0,
'import/no-unresolved': 'error',
'react/display-name': 0,
'react/self-closing-comp': 'error',
'react/react-in-jsx-scope': 'off',
'react/jsx-filename-extension': [
'error',
{ extensions: ['.js', '.jsx', '.ts', '.tsx'] }
],
'react/no-unescaped-entities': 0,
'react/prop-types': 0,
'no-undef': 0,
'no-constant-condition': 1,
'prettier/prettier': [
'error',
{
bracketSpacing: true,
printWidth: 80,
singleQuote: true,
trailingComma: 'none',
tabWidth: 2,
useTabs: false,
bracketSameLine: false,
semi: true
}
]
},
overrides: [
{
files: ['**/*.ts?(x)'],
parser: '@typescript-eslint/parser',
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking'
],
parserOptions: {
project: ['tsconfig.json', './packages/**/tsconfig.json'],
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: 'module'
}
},
{
files: [
'packages/clothes_gpt/**/*.ts?(x)',
'packages/clothes_gpt/**/*.js?(x)'
],
rules: {
'@next/next/no-img-element': 'off'
},
settings: {
'import/parsers': {
'@typescript-eslint/parser': ['.ts', '.tsx']
},
'import/resolver': {
typescript: {
project: path.resolve(
`${__dirname}/packages/clothes_gpt/tsconfig.json`
)
}
}
}
}
],
settings: {
react: {
pragma: 'React',
version: 'detect'
}
},
env: {
browser: true,
es6: true,
jest: true
}
};
I don't understand why "next lint" is linting the function that returns JSX with the "@typescript-eslint/no-empty-function" rule. You can reproduce this error in the repository available here
When running "next lint" in the root/packages/clothes_gpt directory, you should see the error.
Expected Behavior: When running the "next lint" script, functions that return JSX should not trigger the "@typescript-eslint/no-empty-function" rule.
Current Behavior: Functions that return JSX are triggering the "@typescript-eslint/no-empty-function" rule.
951
asked Sep 13 '25 13:09
I want to amplify a comment from @krehwell. In my case this was occurring for me because I had a monorepo setup with different versions of eslint. I was in the process of refactoring it all into a shared package.
Aligning the version of eslint solved the problem.
200
I discovered the cause of my issue and resolved it.
The problem originated from a specific section in the eslintrc.js file, particularly within the plugin:@typescript-eslint/recommended extension plugin.
typescript-eslint/recommended
In line 14 of the eslint plugin @typescript-eslint/recommended, the rule '@typescript-eslint/no-empty-function': 'error' was set.
This rule was the reason behind the continuous linting of @typescript-eslint/no-empty-function. To overcome this, there are a couple of workarounds. One option is to avoid using the @typescript-eslint/recommended plugin altogether. Alternatively, you can override the rule by adding the @typescript-eslint/no-empty-function rule and setting it to "off".
Here's an example configuration snippet demonstrating the override:
"overrides": [
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking"
],
"rules":{
"@typescript-eslint/no-empty-function": "off"
}
]
Regarding the question of why @typescript-eslint/no-empty-function returns JSX, it's best to refer to the specific rule file for detailed information. You can find it in no-empty-function source code
35
answered Sep 15 '25 03:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With