我有一个项目create-react-app，它一直运行良好，一个模板被合并，一切都很好，直到我想开始工作TypeScript，我遵循了文档的建议，我配置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" 不能在顶层调用。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。
// 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"
]
}
}