2022-03-23

複合的問題によってKozanebaのローカル開発環境が動かなくなる問題

原因と思しきもの

Nodeのアップグレード

おそらく操作ミスでホームディレクトリ直下にインストールされたパッケージがいくつかある

解決

ホームディレクトリ直下のインストールを消す

$ export NODE_OPTIONS=--openssl-legacy-provider

ついでに色々更新

FontAwesomeを最新にした場合、オフィシャルのReactコンポーネントがまだ対応していないので型エラーになる、ダウングレードする

MaterialUIをアップデート

useStyleフックの挙動が変更された

リファクタリングの機会

code::

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:

"babel-jest": "^26.6.0"

Don't try to install it manually: your package manager does it automatically.

However, a different version of babel-jest was detected higher up in the tree:

/Users/nishio/node_modules/babel-jest (version: 27.5.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 "babel-jest" 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:

This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if /Users/nishio/node_modules/babel-jest is outside your project directory.

For example, you might have accidentally installed something in your home folder.

7. Try running npm ls babel-jest in your project folder.

This will tell you which other package (apart from the expected react-scripts) installed babel-jest.

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!

3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.

ない

code::

$ npm ls babel-jest

movidea@0.1.0 /Users/nishio/kozaneba

└── (empty)

code::

$ npm install

npm ERR! code ERESOLVE

npm ERR! ERESOLVE unable to resolve dependency tree

npm ERR!

npm ERR! While resolving: movidea@0.1.0

npm ERR! Found: @types/react@17.0.41

npm ERR! node_modules/@types/react

npm ERR! @types/react@"^17.0.11" from the root project

npm ERR!

npm ERR! Could not resolve dependency:

npm ERR! peer @types/react@"^16.8.0" from reactn@2.2.7

npm ERR! node_modules/reactn

npm ERR! reactn@"^2.2.7" from the root project

npm ERR!

npm ERR! Fix the upstream dependency conflict, or retry

npm ERR! this command with --force, or --legacy-peer-deps

npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

npm ERR!

npm ERR! See /Users/nishio/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/nishio/.npm/_logs/2022-03-23T05_31_45_790Z-debug-0.log

対処

$ npm install --legacy-peer-deps reactn@latest

でいいのかな？？

code::

$ npm install --legacy-peer-deps reactn@latest

npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.

npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained

npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained

npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

npm WARN deprecated redux-devtools-extension@2.13.9: Package moved to @redux-devtools/extension.

npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added

npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.

npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'

npm WARN deprecated rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.

npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained

npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'

npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

not fixed yet

code::

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:

This may help because npm has known issues with package hoisting which may get resolved in future versions.

code::

$ yarn install

yarn install v1.22.18

warning ../package.json: No license field

info No lockfile found.

warning react-scripts > babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.

warning react-scripts > webpack-dev-server > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

warning react-scripts > webpack-dev-server > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

warning react-scripts > @pmmmwh/react-refresh-webpack-plugin > native-url > querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

warning react-scripts > webpack-dev-server > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi@15.1.1: Switch to 'npm install joi'

warning react-scripts > workbox-webpack-plugin > workbox-build > rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.

warning react-scripts > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

warning react-scripts > babel-jest > @jest/transform > jest-haste-map > sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added

warning react-scripts > optimize-css-assets-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

warning react-scripts > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.

warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained

warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/address@2.1.4: Moved to 'npm install @sideway/address'

warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained

warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained

warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained

warning react-scripts > workbox-webpack-plugin > workbox-build > strip-comments > babel-plugin-transform-object-rest-spread > babel-runtime > core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

warning reactn-devtools > redux-devtools-extension@2.13.9: Package moved to @redux-devtools/extension.

warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".

warning " > eslint-plugin-cypress@2.12.1" has unmet peer dependency "eslint@>= 3.2.1".

warning " > reactn@2.2.7" has incorrect peer dependency "@types/react@^16.8.0".

warning " > styled-components@5.3.3" has unmet peer dependency "react-is@>= 16.8.0".

warning "firebase-admin > @firebase/database-compat@0.1.6" has unmet peer dependency "@firebase/app-compat@0.x".

warning Workspaces can only be enabled in private projects.

success Saved lockfile.

✨ Done in 158.07s.

yarn install 89.83s user 165.30s system 160% cpu 2:39.20 total

code::

6. Check if /Users/nishio/node_modules/babel-loader is outside your project directory.

For example, you might have accidentally installed something in your home folder.

existed, deleted

code::

7. Try running npm ls babel-loader in your project folder.

This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

code::

$ npm ls babel-loader

movidea@0.1.0 /Users/nishio/kozaneba

└─┬ react-scripts@4.0.3

└── babel-loader@8.1.0

削除しても変わらないな…と思ったがよく見るとeslintに変わってた

code::

$ npm start

movidea@0.1.0 start

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:

"eslint": "^7.11.0"

Don't try to install it manually: your package manager does it automatically.

However, a different version of eslint was detected higher up in the tree:

/Users/nishio/node_modules/eslint (version: 8.11.0)

順繰りに削除していく、お、起動した…

がエラーで死んだ

code::

Starting the development server...

/Users/nishio/kozaneba/node_modules/react-scripts/scripts/start.js:19

throw err;

^

Error: error:0308010C:digital envelope routines::unsupported

at new Hash (node:internal/crypto/hash:67:19)

at Object.createHash (node:crypto:135:10)

at module.exports (/Users/nishio/kozaneba/node_modules/webpack/lib/util/createHash.js:135:53)

at NormalModule._initBuildHash (/Users/nishio/kozaneba/node_modules/webpack/lib/NormalModule.js:417:16)

at /Users/nishio/kozaneba/node_modules/webpack/lib/NormalModule.js:452:10

at /Users/nishio/kozaneba/node_modules/webpack/lib/NormalModule.js:323:13

at /Users/nishio/kozaneba/node_modules/loader-runner/lib/LoaderRunner.js:367:11

at /Users/nishio/kozaneba/node_modules/loader-runner/lib/LoaderRunner.js:233:18

at context.callback (/Users/nishio/kozaneba/node_modules/loader-runner/lib/LoaderRunner.js:111:13)

at /Users/nishio/kozaneba/node_modules/react-scripts/node_modules/babel-loader/lib/index.js:59:103 {

library: 'digital envelope routines',

reason: 'unsupported',

code: 'ERR_OSSL_EVP_UNSUPPORTED'

}

Node.js v17.7.2

npm start 2.82s user 1.69s system 57% cpu 7.797 total

$ export NODE_OPTIONS=--openssl-legacy-provider

code::

/Users/nishio/kozaneba/src/utils/support_touch.ts

TypeScript error in /Users/nishio/kozaneba/src/utils/support_touch.ts(11,17):

Property 'pointerEnabled' does not exist on type 'Navigator'. TS2339

9 | const navigator = window.navigator;

10 | let mousedown, mousemove, mouseup;

11 | if (navigator.pointerEnabled || navigator.msPointerEnabled) {

| ^

12 | mousedown = "onPointerDown";

13 | mousemove = "onPointerMove";

14 | mouseup = "onPointerUp onPointerCancel";

code::

TypeScript error in /Users/nishio/kozaneba/src/App/StatusBar.tsx(28,33):

Type 'IconDefinition' is not assignable to type 'IconProp'. TS2322

26 | let contents = null;

27 | if (statusBar.type === "loading") {

28 | contents = <FontAwesomeIcon icon={faSpinner} spin={true} />;

| ^

29 | } else if (statusBar.type === "done") {

30 | contents = addTooltip(

31 | <FontAwesomeIcon icon={faCheckCircle} />,

code::