Reactjs 无法读取属性'；使用'；未定义的，重新布线的_Reactjs_Typescript_Eslintrc_React App Rewired

Reactjs 无法读取属性'；使用'；未定义的，重新布线的

reactjs typescript

Reactjs 无法读取属性'；使用'；未定义的，重新布线的,reactjs,typescript,eslintrc,react-app-rewired,Reactjs,Typescript,Eslintrc,React App Rewired,我有一个用create-react-app制作的项目，它一直运行良好，一个模板被合并，在我想开始使用TypeScript之前一切都很好，我遵循了的建议，我配置了eslintrc.js，我的包.json，我修复了代码中发现的所有问题，当尝试使用npm start运行项目时，我得到以下错误 Cannot read property 'use' of undefined npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my-proyect@0.1.

我有一个用

create-react-app

制作的项目，它一直运行良好，一个模板被合并，在我想开始使用

TypeScript

之前一切都很好，我遵循了的建议，我配置了

eslintrc.js

，我的

包.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 ]

我的

package.json

，大部分结构是由模板的依赖项添加的


{
“名称”：“我的项目”，
“版本”：“0.1.0”，
“私人”：没错，
“脚本”：{
“启动”：“反应应用程序重新布线启动”，
“构建”：“react应用程序重新布线构建”，
“构建演示”：“REACT\u APP\u AUTHENTICATED=true REACT APP rewired build”，
“测试”：“反应应用程序重新布线测试”，
“皮棉分级”：“皮棉分级”，
“更漂亮”：“更漂亮——写\”src/***.{js，jsx，ts，tsx，scss，less}\，
“eslint”：“eslint--ext.js，jsx src”，
“stylelint”：“stylelint\”src/***.{scss，less}”
},
“哈士奇”：{
“挂钩”：{
“预提交”：“npm运行lint暂存”
}
},
“林特舞台”：{
“src/***.{js，jsx，ts，tsx，scss，less}”：[
“更漂亮——写”，
“git添加”
],
“src/***.{js，jsx，ts，tsx}”：[
“eslint”
],
“src/***.{scss，less}”：[
“stylelint”
]
},
“依赖项”：{
“@ant设计/图标”：“^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模拟适配器”：“^1.18.1”，
“引导”：“^4.5.2”，
“chart.js”：“^2.9.3”，
“图表编制者”：“^0.11.4”，
“图表列表插件工具提示已更新”：“^0.1.2”，
“类名”：“^2.2.6”，
“已连接的路由器”：“^6.8.0”，
“d3 dsv”：“^1.2.0”，
“d3格式”：“^1.4.4”，
“d3时间格式”：“^2.2.3”，
“js草案”：“^0.11.5”，
“firebase”：“^7.19.1”，
“历史记录”：“^4.10.1”，
“jsonwebtoken”：“^8.5.1”，
“jwt解码”：“^3.1.2”，
“lodash”：“^4.17.15”，
“时刻”：“2.27.0”，
“nprogress”：“^0.2.0”，
“道具类型”：“^15.7.2”，
“qs”：“^6.9.3”，
“反应”：“^16.13.1”，
“react-c3js”：“^0.1.20”，
“反应图表师”：“^0.14.3”，
“react-chartjs-2”：“^2.9.0”，
“react dom”：“^16.13.1”，
“所见即所得”：“^1.14.7”，
“反应头盔”：“^6.0.0”，
“反应突出显示单词”：“^0.16.0”，
“反应国际”：“^5.15.7”，
“react jvectormap”：“^0.0.1”，
“反应完美滚动条”：“^1.5.8”，
“react redux”：“^7.2.0”，
“反应可调整大小”：“^1.10.1”，
“反应路由器dom”：“^5.1.2”，
“反应脚本”：“4.0.1”，
“反应可排序树”：“^2.7.1”，
“react sortablejs”：“^2.0.11”，
“react stickynode”：“^2.1.1”，
“反应股票图表”：“^0.7.8”，
“反应过渡组”：“^4.3.0”，
“reactstrap”：“^8.5.1”，
“redux”：“^4.0.5”，
“redux开发工具扩展”：“^2.13.9”，
“redux记录器”：“^3.0.6”，
“redux传奇”：“^1.1.3”，
“sortablejs”：“1.10.2”，
“存储”：“^2.0.12”，
“类型脚本”：“^4.2.4”
},
“依赖性”：{
“@typescript eslint/eslint插件”：“^4.6.0”，
“@typescript eslint/parser”：“^4.6.0”，
“@babel/plugin提案装饰程序”：“^7.8.3”，
“babel插件导入”：“^1.13.0”，
“自定义cra”：“^0.9.1”，
“eslint配置airbnb”：“^17.1.0”，
“eslint配置美观”：“^5.0.0”，
“哈士奇”：“^4.2.3”，
“减去”：“^3.11.1”，
“较少加载程序”：“^5.0.0”，
“lint staged”：“^10.0.8”，
“节点sass”：“^4.13.1”，
“更漂亮”：“^1.19.1”，
“react应用程序重新布线”：“^2.1.6”，
“stylelint”：“^13.2.0”，
“stylelint config prettier”：“^5.2.0”，
stylelint配置标准“^18.3.0”
},
“eslintConfig”：{
“扩展”：“反应应用程序”
},
“浏览者”：{
“生产”：[
">0.2%",
“没有死”，
“不是全部”
],
“发展”：[
“上一个chrome版本”，
“上一个firefox版本”，
“最后1个safari版本”
]
}
}

也许对您来说不是一个理想的解决方案，但我通过从

配置覆盖.js中删除useEslintRc
实现了这一点。我做了更改，但它会在css_loader中产生其他错误。经过大量测试和研究，总而言之，我要删除重新布线的react应用程序。谢谢craco看起来确实更积极维护！
// 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(),
)