Reactでnpm startができなくなった話。

#React.js Node.js環境でnpm start実行時にエラー発生。
解決策だけ見たい人は最後に載せてます。（予定）

##問題編

#####[【React】いまどきのJSプログラマーのためのNode.jsとReactアプリケーション開発テクニックという参考書](https://amzn.to/3i8JRoF)

の写本・実践をやっていると、

React.js Node.js環境でnpm startできなくなった。


##経緯編
create-react-appでreactのアプリを作った。

app.jsを編集し、いざ起動する。

```
npm start 
```

そうすると、以下のようなエラーが発生。

```
> cycle@0.1.0 start /Users/user/Documents/ubuntu/cycle
> react-scripts start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.42.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /Users/user/Documents/ubuntu/node_modules/webpack (version: 4.44.1) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/user/Documents/ubuntu/node_modules/webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cycle@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cycle@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!     /Users/user/.npm/_logs/2020-09-07T13_28_49_449Z-debug.log
(base) user-no-MacBook-Air:cycle user$ SKIP_PREFLIGHT_CHECK=true npm start

> cycle@0.1.0 start /Users/user/Documents/ubuntu/cycle
> react-scripts start

Attempting to bind to HOST environment variable: x86_64-apple-darwin13.4.0
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://bit.ly/CRA-advanced-config

dyld: lazy symbol binding failed: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/ubuntu/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

dyld: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/ubuntu/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cycle@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cycle@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!     /Users/user/.npm/_logs/2020-09-07T13_29_11_414Z-debug.log
(base) user-no-MacBook-Air:cycle user$ eact-scripts start
-bash: eact-scripts: command not found
(base) user-no-MacBook-Air:cycle user$ react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.42.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /Users/user/Documents/ubuntu/node_modules/webpack (version: 4.44.1) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/user/Documents/ubuntu/node_modules/webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
```

検索すると、

```
SKIP_PREFLIGHT_CHECK=true
```

を.envファイルに記載すると良いと出てきた。（勘違いかも。。）

だが、まずcreate-react-appで作ったアプリのフォルダ内に.envファイルが見つからない。。。

どうしようと悩み、調べ続けるとnpm startの後に、直接打てば良いのでは？　との記事を発見。。

試してみる。

```
SKIP_PREFLIGHT_CHECK=true　npm start
```

結果。

```
> cycle@0.1.0 start /Users/user/Documents/ubuntu/cycle
> react-scripts start

Attempting to bind to HOST environment variable: x86_64-apple-darwin13.4.0
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://bit.ly/CRA-advanced-config

dyld: lazy symbol binding failed: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/ubuntu/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

dyld: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/ubuntu/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cycle@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cycle@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!     /Users/user/.npm/_logs/2020-09-07T13_29_11_414Z-debug.log
(base) user-no-MacBook-Air:cycle user$ eact-scripts start
-bash: eact-scripts: command not found
(base) user-no-MacBook-Air:cycle user$ react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.42.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /Users/user/Documents/ubuntu/node_modules/webpack (version: 4.44.1) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/user/Documents/ubuntu/node_modules/webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

```

んーうまくいかない。。。。

さらに調べる。

そうすると、今度はホームディレクトリのnode_modulesを全削除すればうまくいくとの記事を発見。

試してみる。

create-react-appで作った該当node_modulesのみ、一時名前を変えて退避。

そして、それ以外のnode_modulesをホームに戻って全削除。

以下全削除のcommand

```
find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +
```

そして、create-react-appで作ったアプリのディレクトリに戻って、npm startを再度実行。

またエラーになった。

でもエラー文は変わった。

```

> cycle@0.1.0 start /Users/user/Documents/ubuntu/cycle
> react-scripts start

internal/modules/cjs/loader.js:895
  throw err;
  ^

Error: Cannot find module 'entities/maps/entities.json'
Require stack:
- /Users/user/Documents/ubuntu/cycle/node_modules/htmlparser2/lib/Tokenizer.js
- /Users/user/Documents/ubuntu/cycle/node_modules/htmlparser2/lib/Parser.js
- /Users/user/Documents/ubuntu/cycle/node_modules/htmlparser2/lib/index.js
- /Users/user/Documents/ubuntu/cycle/node_modules/renderkid/lib/tools.js
- /Users/user/Documents/ubuntu/cycle/node_modules/renderkid/lib/renderKid/styleApplier/inline.js
- /Users/user/Documents/ubuntu/cycle/node_modules/renderkid/lib/RenderKid.js
- /Users/user/Documents/ubuntu/cycle/node_modules/pretty-error/lib/PrettyError.js
- /Users/user/Documents/ubuntu/cycle/node_modules/html-webpack-plugin/lib/errors.js
- /Users/user/Documents/ubuntu/cycle/node_modules/html-webpack-plugin/index.js
- /Users/user/Documents/ubuntu/cycle/node_modules/react-scripts/config/webpack.config.js
- /Users/user/Documents/ubuntu/cycle/node_modules/react-scripts/scripts/start.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:892:15)
    at Function.Module._load (internal/modules/cjs/loader.js:742:27)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/user/Documents/ubuntu/cycle/node_modules/htmlparser2/lib/Tokenizer.js:4:17)
    at Module._compile (internal/modules/cjs/loader.js:1075:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1096:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Function.Module._load (internal/modules/cjs/loader.js:781:14)
    at Module.require (internal/modules/cjs/loader.js:964:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/user/Documents/ubuntu/cycle/node_modules/htmlparser2/lib/Tokenizer.js',
    '/Users/user/Documents/ubuntu/cycle/node_modules/htmlparser2/lib/Parser.js',
    '/Users/user/Documents/ubuntu/cycle/node_modules/htmlparser2/lib/index.js',
    '/Users/user/Documents/ubuntu/cycle/node_modules/renderkid/lib/tools.js',
    '/Users/user/Documents/ubuntu/cycle/node_modules/renderkid/lib/renderKid/styleApplier/inline.js',
    '/Users/user/Documents/ubuntu/cycle/node_modules/renderkid/lib/RenderKid.js',
    '/Users/user/Documents/ubuntu/cycle/node_modules/pretty-error/lib/PrettyError.js',
    '/Users/user/Documents/ubuntu/cycle/node_modules/html-webpack-plugin/lib/errors.js',
    '/Users/user/Documents/ubuntu/cycle/node_modules/html-webpack-plugin/index.js',
    '/Users/user/Documents/ubuntu/cycle/node_modules/react-scripts/config/webpack.config.js',
    '/Users/user/Documents/ubuntu/cycle/node_modules/react-scripts/scripts/start.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cycle@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cycle@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!     /Users/user/.npm/_logs/2020-09-07T13_38_20_165Z-debug.log
```

エラー文のいかに注目。。。
```
Error: Cannot find module 'entities/maps/entities.json'
```

このエラー文で検索をかけると、

```
install entities: npm i entities
create a new index.js file with: require("entities/maps/entities.json")
run it
```

とすれば良いのでは？　との記事を発見。

実行してみる。

結果。

```
> cycle@0.1.0 start /Users/user/Documents/ubuntu/cycle
> react-scripts start

Attempting to bind to HOST environment variable: x86_64-apple-darwin13.4.0
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://bit.ly/CRA-advanced-config

dyld: lazy symbol binding failed: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/ubuntu/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

dyld: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/ubuntu/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cycle@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cycle@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!     /Users/user/.npm/_logs/2020-09-07T22_44_27_537Z-debug.log
```
また別のエラー。。。

はぁ。。。

エラー文のなかで、

```
Attempting to bind to HOST environment variable: x86_64-apple-darwin13.4.0
If this was unintentional, check that you haven't mistakenly set it in your shell.
```

に注目し、このエラー文で検索をかける。

そうすると、原因が

>「HOST環境変数にバインドしようとしています：x86_64-apple-darwin13.4.0
これが意図的でない場合は、誤ってシェルに設定していないことを確認してください。」

らしい。

HostをBindから解放するには

```
unset HOST
```

をすれば良いらしい。

実行。

###エラー消えた！！！！

##解決編

以下__僕の場合__の解決手順


1. ホームディレクトリのnode_modulesを全削除(create-react-appで作ったディレクトリのnode_modulesを除く。)

2. entitiesのinstall

1. HostのBindからの解放

以下実際のコマンド

```
find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +
```

```
install entities: npm i entities
create a new index.js file with: require("entities/maps/entities.json")
run it
```

```
unset HOST
```


##参考文献
https://teratail.com/questions/177560

https://qiita.com/yuta0801/items/118d9478ad536a443f3f

https://mebee.info/2020/03/03/post-6791/

https://github.com/davideicardi/live-plugin-manager/issues/14

https://qiita.com/hppRC/items/4c09c1f33135a40870bd