无法读取未定义的属性"名称" 在 React 中检查时发生



我有一个很奇怪的bug我想你可以用eslint来调用它当我尝试运行yarn lint

$ tsc --noEmit && eslint src/**/*.ts{,x}

由于某些原因,

失败了
Oops! Something went wrong! :(
ESLint: 7.32.0
TypeError: Cannot read property 'name' of undefined
Occurred while linting /Users/Reynaldo/Documents/cafemat/src/hooks/useFirebase.ts:13
at ExpressionStatement (/Users/Reynaldo/Documents/cafemat/node_modules/eslint-plugin-storybook/lib/rules/prefer-csf.js:18:44)
at /Users/Reynaldo/Documents/cafemat/node_modules/eslint/lib/linter/safe-emitter.js:45:58
at Array.forEach (<anonymous>)
at Object.emit (/Users/Reynaldo/Documents/cafemat/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
at NodeEventGenerator.applySelector (/Users/Reynaldo/Documents/cafemat/node_modules/eslint/lib/linter/node-event-generator.js:293:26)
at NodeEventGenerator.applySelectors (/Users/Reynaldo/Documents/cafemat/node_modules/eslint/lib/linter/node-event-generator.js:322:22)
at NodeEventGenerator.enterNode (/Users/Reynaldo/Documents/cafemat/node_modules/eslint/lib/linter/node-event-generator.js:336:14)
at CodePathAnalyzer.enterNode (/Users/Reynaldo/Documents/cafemat/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:711:23)
at /Users/Reynaldo/Documents/cafemat/node_modules/eslint/lib/linter/linter.js:960:32
at Array.forEach (<anonymous>)
error Command failed with exit code 2.

同样,如果我有我的useFirebase.ts文件集中(在视图中)在VSCode和运行yarn start我得到错误:

Failed to compile
Cannot read property 'name' of undefined
Occurred while linting /Users/Reynaldo/Documents/cafemat/src/hooks/useFirebase.ts:13
This error occurred during the build time and cannot be dismissed.

然而,如果我把焦点(进入视图)放在VSCode上的任何其他文件并运行yarn start,项目编译和运行没有问题。

这是一个奇怪的bug还是我做错了什么?以下是文件:

useFirebase.ts

import { useEffect, useState } from "react";
import { FirebaseApp, deleteApp, getApp, initializeApp } from "firebase/app";
import { appName, firebaseConfig } from "../config/firebaseConfig";
function useFirebase(): FirebaseApp | null {
const [firebaseApp, setFirebaseApp] = useState<FirebaseApp | null>(null);
useEffect(() => {
let app: FirebaseApp;
try {
app = getApp(appName);
} 
catch (err) {
app = initializeApp(firebaseConfig, appName);
}
setFirebaseApp(app);
return () => {
deleteApp(app);
};
}, []);
return firebaseApp;
}
export default useFirebase;

package.json

{
"name": "xxxxxxx",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reach/router": "1.3.4",
"firebase": "9.1.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-helmet-async": "1.1.2",
"react-scripts": "4.0.3",
"web-vitals": "1.0.1"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"format": "prettier --write 'src/**/*.ts{,x}'",
"lint": "tsc --noEmit && eslint src/**/*.ts{,x}",
"cypress:open": "cypress open",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public",
"serve": "serve -s build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@craco/craco": "^6.2.0",
"@storybook/addon-actions": "^6.3.2",
"@storybook/addon-essentials": "^6.3.2",
"@storybook/addon-links": "^6.3.2",
"@storybook/node-logger": "^6.3.2",
"@storybook/preset-create-react-app": "^3.1.7",
"@storybook/react": "^6.3.2",
"@tailwindcss/postcss7-compat": "^2.2.4",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/reach__router": "^1.3.9",
"@types/react": "^17.0.13",
"@types/react-dom": "^17.0.0",
"@types/react-helmet": "^6.1.2",
"@typescript-eslint/eslint-plugin": "^4.28.1",
"@typescript-eslint/parser": "^4.28.1",
"autoprefixer": "^9",
"babel-loader": "8.1.0",
"cypress": "^7.6.0",
"eslint": "^7.2.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-chai-friendly": "^0.7.1",
"eslint-plugin-cypress": "^2.11.3",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.3.6",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"eslint-plugin-storybook": "^0.1.1",
"postcss": "^7",
"postcss-cli": "^8.3.1",
"prettier": "^2.3.2",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"typescript": "^4.1.2"
}
}

.eslintrc

{
"extends": [
"airbnb-typescript",
"airbnb/hooks",
"plugin:@typescript-eslint/recommended",
"plugin:jest/recommended",
"plugin:prettier/recommended",
"plugin:cypress/recommended",
"plugin:chai-friendly/recommended"
],
"plugins": [
"react", 
"@typescript-eslint", 
"jest", 
"cypress", 
"chai-friendly", 
"storybook"
],
"env": {
"browser": true,
"es6": true,
"jest": true,
"cypress/globals": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module",
"project": "./tsconfig.json"
},
"rules": {
"linebreak-style": "off",
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
],
"cypress/no-assigning-return-values": "error",
"cypress/no-unnecessary-waiting": "error",
"cypress/assertion-before-screenshot": "warn",
"cypress/no-force": "warn",
"cypress/no-async-tests": "error",
"no-unused-expressions": 0,
"chai-friendly/no-unused-expressions": 2,
"storybook/prefer-csf": "error"
}
}

.eslintignore

# Temporary lint ignore because storybook example files
# generated files that go against specified ESLint rules.
src/stories
# ESLinting error taken off by ignoring config files
# https://stackoverflow.com/questions/58510287/parseroptions-project-has-been-set-for-typescript-eslint-parser/64488474#64488474
tailwind.config.js
postcss.config.js
craco.config.js

我解决了这个问题。由于某些原因,eslint-plugin-storybookprefer-csf规则会导致此错误。一旦我从.eslintrc中将"storybook/prefer-csf": "error"注释掉,yarn lint命令就可以正常运行了。如果有人有线索,为什么这解决了错误,它将非常感激,如果你可以解释。谢谢!: D