在使用react时,无法运行yarn start,使我感到困扰

由于突然无法运行yarn start而感到困惑,所以我将原因和经过写下来。
总的结果是我不小心删除了react-scripts…

发生的事件

$ yarn start
yarn run v1.22.5
$ react-scripts start
/bin/sh: react-scripts: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

事件发生的经过

好久没有碰过这个应用了,
因为一个一个安装包看起来很麻烦,所以我直接修改了package.json…
好的,现在来运行yarn install,先看看是否有错误…嗯?奇怪,居然不能运行…为什么呢…

解决的路线

第一次見到這個錯誤…這是什麼…緊張…
在它變成恐慌之前,首先請顯示錯誤訊息讓我好好閱讀。

/bin/sh: react-scripts: command not found

搖呢(Yarn)说,原因是没有react-scripts对吧?哦……原来如此……

这是什么意思?

$ yarn start

當遭遇到(或做)這個時候,看到的是

(...省略)
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
(省略...)

在这个部分,
在这里调用了react-scripts,但找不到这样的东西?你是认真的吗?

原来是这样吗?那么react-scripts应该在node_modules/文件夹中(我想)我来查一下。

$ ls node_modules/ | grep react-scripts
$ 

那个…没了?… le?)


$ ls -1 node_modules/ | grep react-
babel-plugin-add-react-displayname
babel-plugin-react-docgen
babel-plugin-transform-react-remove-prop-types
babel-preset-react-app
connected-react-router
create-react-context
css-to-react-native
enzyme-adapter-react-16
eslint-config-react-app
eslint-plugin-react-hooks
hoist-non-react-statics
mini-create-react-context
react-addons-create-fragment
react-app-polyfill
react-async-script
react-circle
react-clientside-effect
react-color
react-dev-utils
react-div-100vh
react-docgen
react-dom
react-draggable
react-dropzone
react-element-to-jsx-string
react-error-overlay
react-fast-compare
react-focus-lock
react-ga
react-google-recaptcha
react-gtm-module
react-helmet
react-helmet-async
react-hot-loader
react-hotkeys
react-infinite-scroller
react-input-autosize
react-inspector
react-is
react-lifecycles-compat
react-move
react-native-get-random-values
react-popper
react-popper-tooltip
react-pose
react-redux
react-router
react-router-dom
react-router-hash-link
react-scroll
react-select
react-side-effect
react-sizeme
react-syntax-highlighter
react-test-renderer
react-textarea-autosize
react-transition-group
react-use
storybook-react-router

果然没有…

当我查看package.json时,看到react-scripts已经消失了。

解决

所以在package.json中添加react-scripts,并运行yarn-install来解决。

总结

既然错误信息都详细指导着我,就不应该因为遇到了从未见过的错误而陷入恐慌。

在处理错误时,创建错误消息是很重要的,这样可以让负责处理错误的人知道。我会注意的。

广告
将在 10 秒后关闭
bannerAds