英文:
Cannot read properties of undefined (reading 'getTokens') Occurred while linting /app/layout.tsx:16 Rule: "@typescript-eslint/no-empty-function"
问题
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 = {
// ... (rest of your ESLint configuration)
};
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.
英文:
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.
答案1
得分: 5
我发现了我的问题的原因并解决了它。
问题源自于eslintrc.js文件中的特定部分，特别是plugin:@typescript-eslint/recommended扩展插件中的一个部分。
在eslint插件@typescript-eslint/recommended的第14行，设置了规则'@typescript-eslint/no-empty-function': 'error'。
这个规则是导致持续进行@typescript-eslint/no-empty-function检查的原因。为了解决这个问题，有一些解决方法。一个选项是完全避免使用@typescript-eslint/recommended插件。或者，你可以通过添加@typescript-eslint/no-empty-function规则并将其设置为"off"来覆盖该规则。
以下是一个演示覆盖的示例配置片段：
"overrides": [
{
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking"
],
"rules": {
"@typescript-eslint/no-empty-function": "off"
}
}
]
关于为什么@typescript-eslint/no-empty-function返回JSX的问题，最好参考具体的规则文件以获取详细信息。你可以在no-empty-function源代码中找到它。
英文:
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.
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
答案2
得分: 4
我想强调一下@krehwell的评论。在我的情况下，这是因为我有一个使用不同版本eslint的monorepo设置。我正在将它们全部重构成一个共享包。
将eslint的版本对齐解决了问题。
英文:
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.
答案3
得分: 0
我遇到了同样的问题，通过在monorepo项目中同意eslint版本来解决了它。
英文:
I had the same problem and I solved it by agreeing to the eslint version in the monorepo project
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论