4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

react で yarn startができなくなって困った

Last updated at Posted at 2020-08-30

急に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 installひとつづつやるのめんどくさいから、package.json一気に書き換えて…
よしyarn installして、とりあえずエラー出てないか起動してみよう....あれ?そもそも起動ができない…なぜだ…

解決までの道筋

初めてみたエラーだ…なんだこれ…パニック…
とかなる前にまずはエラーメッセージを出してくれているのでちゃんと読む。

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

yarn曰く、原因はreact-scriptsがないですよ?と言っている。
あ…なるほど…

これはどういうことか

$ yarn start

をした時に見ているのは

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

この部分。
ここでreact-scripts呼んでいるのにそんなもの見つかりませんよ?正気ですか?と言われている。

なるほど?ではreact-scriptsnode_modules/にいるはず(と思っている)ので調べる。

$ ls node_modules/ | grep react-scripts
$ 

あれ…ない?


$ 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.jsonreact-scriptsを追記して、yarn-installして解決。

まとめ

ちゃんとエラーメッセージで教えてくれているので、
初めてみるエラーだからってパニックになってはいけない。

…あとエラーハンドリングする時は、
エラー対応した人がわかるようにエラーメッセンジャー作るの重要ですね。
気をつけます。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?