在React中进行lint时发生了无法读取未定义属性'name'的错误。

Question

24 浏览2023年4月20日

匿名的 2023年4月20日

0 Comments

我遇到了一个非常奇怪的“错误”，当我尝试运行`yarn lint`时，我猜你可以称之为eslint的一个问题。

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

由于某种原因，它失败了，并显示以下错误信息：

糟糕！出现了一些问题！:(
ESLint: 7.32.0
TypeError: Cannot read property 'name' of undefined
在对 /Users/Reynaldo/Documents/cafemat/src/hooks/useFirebase.ts 进行代码检查时发生
    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 ()
    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 ()
error Command failed with exit code 2.

此外，如果我将焦点放在VSCode上的useFirebase.ts文件上，并运行`yarn start`，我会收到以下错误：

编译失败
Cannot read property 'name' of undefined
在对 /Users/Reynaldo/Documents/cafemat/src/hooks/useFirebase.ts 进行代码检查时发生
该错误发生在构建时，无法解决。

但是，如果我将焦点放在VSCode上的任何其他文件上，并运行`yarn start`，项目就可以正常编译和运行。

这是一个奇怪的错误还是我做错了什么？以下是文件内容：

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(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

# 临时忽略lint的storybook示例文件
# 生成的文件违反了指定的ESLint规则。
  src/stories
# 忽略配置文件导致ESLint错误
# 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

0

1 答案

匿名的 · Answer 1 · 2023-08-23T10:04:50+00:00

问题出现的原因是 eslint-plugin-storybook 的 prefer-csf 规则导致的。将 .eslintrc 中的 "storybook/prefer-csf": "error" 注释掉，就可以正常运行 yarn lint 命令了。不清楚为什么这样解决了错误，如果有人知道原因，请解释一下。谢谢！

有趣。你的代码中是否使用了 Storybook 的 storiesOf 语法？能否在问题中分享一下这部分代码？

没有，我没有在任何地方使用 storiesOf 语法，如果我注释掉 "storybook/prefer-csf": "error"，linter、storybook和其他一切都能正常运行。

解决方法：注释掉 .eslintrc 中的 "storybook/prefer-csf": "error" 规则。