Cannot read property 'name' of undefined Occurred while linting in React - reactjs

Question

I have this really weird "bug" I guess you can call it with eslint when I try and run yarn lint
$ tsc --noEmit && eslint src/**/*.ts{,x}
For some reason it fails with
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.
Also, if I have my useFirebase.ts file focused (in view) on VSCode and run yarn start I get the error:
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.
Yet if I put in focus (into view) any other file on VSCode and run yarn start the project compiles and runs without problems.
Is this a weird bug or am I doing something wrong? Here are the files:
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

Answer 1

Ok so I solved the problem. For some reason the prefer-csf rule of eslint-plugin-storybook causes this error. Once I commented out "storybook/prefer-csf": "error" from the .eslintrc the yarn lint command runs without problems. If anyone has a clue as to why this solves the error it would be greatly appreciated if you could explain. Thanks! :D