React.js Node.js環境でnpm start実行時にエラー発生。
解決策だけ見たい人は最後に載せてます。（予定）
問題編
【React】いまどきのJSプログラマーのためのNode.jsとReactアプリケーション開発テクニックという参考書
の写本・実践をやっていると、
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
をすれば良いらしい。
実行。
エラー消えた！！！！
解決編
以下僕の場合の解決手順
ホームディレクトリのnode_modulesを全削除(create-react-appで作ったディレクトリのnode_modulesを除く。)
entitiesのinstall
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