reactjs - 无法读取未定义、react-app-rewired 的属性 'use'

Question

我有一个用 create-react-app 做的项目它一直运行良好，合并了一个模板，一切都很好，直到我想开始使用 TypeScript , 我遵循了 documentation 的建议, 我配置了 eslintrc.js , 我的 package.json , 我修复了代码中发现的所有问题，当尝试使用 npm start 运行项目时我收到以下错误。

Cannot read property 'use' of undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-proyect@0.1.0 start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-proyect@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Richard\AppData\Roaming\npm-cache\_logs\2021-05-13T18_54_46_252Z-debug.log

文件内容 2021-05-13T18_54_46_252Z-debug.log

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start'
1 verbose cli ]
2 info using npm@6.14.11
3 info using node@v14.16.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle my-proyect@0.1.0~prestart: my-proyect@0.1.0
6 info lifecycle my-proyect@0.1.0~start: my-proyect@0.1.0
7 verbose lifecycle my-proyect@0.1.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle my-proyect@0.1.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Richard\Documents\proyectos\react\my-proyect\node_modules\.bin;C:\Program Files\Common Files\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\MongoDB\Tools\100\bin;C:\src\flutter\bin;C:\Program Files\MongoDB\Server\4.4\bin;C:\Users\Richard\AppData\Local\Microsoft\WindowsApps;C:\Users\Richard\AppData\Roaming\npm;C:\Users\Richard\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\heroku\bin
9 verbose lifecycle my-proyect@0.1.0~start: CWD: C:\Users\Richard\Documents\proyectos\react\my-proyect
10 silly lifecycle my-proyect@0.1.0~start: Args: [ '/d /s /c', 'react-app-rewired start' ]
11 silly lifecycle my-proyect@0.1.0~start: Returned: code: 1  signal: null
12 info lifecycle my-proyect@0.1.0~start: Failed to exec start script
13 verbose stack Error: my-proyect@0.1.0 start: `react-app-rewired start`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid my-proyect@0.1.0
15 verbose cwd C:\Users\Richard\Documents\proyectos\react\my-proyect
16 verbose Windows_NT 10.0.19042
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v14.16.0
19 verbose npm  v6.14.11
20 error code ELIFECYCLE
21 error errno 1
22 error my-proyect@0.1.0 start: `react-app-rewired start`
22 error Exit status 1
23 error Failed at the my-proyect@0.1.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

查找使用 npm start 时可能导致错误的文件或 npm build , 在 config-overrides.js .
该文件突出显示了一些 eslint错误，我解决了一些，其他错误我不太明白
信息:

React Hook "useEslintRc" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.

// Overriding CreateReactApp settings, ref: https://github.com/arackaf/customize-cra
const {
  override,
  // fixBabelImports,
  addLessLoader,
  useEslintRc,
  addDecoratorsLegacy,
  useBabelRc,
} = require('customize-cra')

// eslint config
const eslintConfig = require('./.eslintrc.js');
const useEslintConfig = configRules => config => {
  const updatedRules = config.module.rules.map(
    rule => {
      // Only target rules that have defined a `useEslintrc` parameter in their options
      if (rule.use && rule.use.some(use => use.options && use.options.useEslintrc !== void 0)) {
        const ruleUse = rule.use[0]
        const baseOptions = ruleUse.options
        const baseConfig = baseOptions.baseConfig || {}
        const newOptions = {
          useEslintrc: false,
          ignore: true,
          baseConfig: { ...baseConfig, ...configRules },
        }
        ruleUse.options = newOptions
        return rule

        // Rule not using eslint. Do not modify.
      } else {
        return rule
      }
    }
  )

  config.module.rules = updatedRules;
  return config;
}

module.exports = override(
  addDecoratorsLegacy(),
  useEslintRc(),
  addLessLoader({
    javascriptEnabled: true,
  }),
  useEslintConfig(eslintConfig),
  useBabelRc(),
)

我的 package.json , 大部分结构是由模板的依赖项添加的。

{
  "name": "my-proyect",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "build-demo": "REACT_APP_AUTHENTICATED=true react-app-rewired build",
    "test": "react-app-rewired test",
    "lint-staged": "lint-staged",
    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,scss,less}\"",
    "eslint": "eslint --ext .js,jsx src",
    "stylelint": "stylelint \"src/**/*.{scss,less}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,scss,less}": [
      "prettier --write",
      "git add"
    ],
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint"
    ],
    "src/**/*.{scss,less}": [
      "stylelint"
    ]
  },
  "dependencies": {
    "@ant-design/icons": "^4.2.2",
    "@types/jest": "^26.0.23",
    "@types/node": "^15.0.1",
    "@types/react": "^17.0.4",
    "@types/react-dom": "^17.0.3",
    "antd": "^4.6.3",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.18.1",
    "bootstrap": "^4.5.2",
    "chart.js": "^2.9.3",
    "chartist": "^0.11.4",
    "chartist-plugin-tooltips-updated": "^0.1.2",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.8.0",
    "d3-dsv": "^1.2.0",
    "d3-format": "^1.4.4",
    "d3-time-format": "^2.2.3",
    "draft-js": "^0.11.5",
    "firebase": "^7.19.1",
    "history": "^4.10.1",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.15",
    "moment": "2.27.0",
    "nprogress": "^0.2.0",
    "prop-types": "^15.7.2",
    "qs": "^6.9.3",
    "react": "^16.13.1",
    "react-c3js": "^0.1.20",
    "react-chartist": "^0.14.3",
    "react-chartjs-2": "^2.9.0",
    "react-dom": "^16.13.1",
    "react-draft-wysiwyg": "^1.14.7",
    "react-helmet": "^6.0.0",
    "react-highlight-words": "^0.16.0",
    "react-intl": "^5.15.7",
    "react-jvectormap": "^0.0.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-redux": "^7.2.0",
    "react-resizable": "^1.10.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "4.0.1",
    "react-sortable-tree": "^2.7.1",
    "react-sortablejs": "^2.0.11",
    "react-stickynode": "^2.1.1",
    "react-stockcharts": "^0.7.8",
    "react-transition-group": "^4.3.0",
    "reactstrap": "^8.5.1",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "sortablejs": "1.10.2",
    "store": "^2.0.12",
    "typescript": "^4.2.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.6.0",
    "@typescript-eslint/parser": "^4.6.0",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "babel-plugin-import": "^1.13.0",
    "customize-cra": "^0.9.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^5.0.0",
    "husky": "^4.2.3",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "lint-staged": "^10.0.8",
    "node-sass": "^4.13.1",
    "prettier": "^1.19.1",
    "react-app-rewired": "^2.1.6",
    "stylelint": "^13.2.0",
    "stylelint-config-prettier": "^5.2.0",
    "stylelint-config-standard": "^18.3.0"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

也许对你来说不是一个理想的解决方案，但我通过删除 useEslintRc 来解决这个问题。来自 config-overrides.js https://github.com/arackaf/customize-cra/issues/274