2022-03-23

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

原因と思しきもの
- Nodeのアップグレード
- おそらく操作ミスでホームディレクトリ直下にインストールされたパッケージがいくつかある
解決
- ホームディレクトリ直下のインストールを消す
- $ export NODE_OPTIONS=--openssl-legacy-provider
ついでに色々更新
- FontAwesomeを最新にした場合、オフィシャルのReactコンポーネントがまだ対応していないので型エラーになる、ダウングレードする
- MaterialUIをアップデート
  - useStyleフックの挙動が変更された
    - リファクタリングの機会

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:

  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/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!

Remove “babel-jest” from dependencies and/or devDependencies in the package.json file in your project folder. ない

$ npm ls babel-jest 
movidea@0.1.0 /Users/nishio/kozaneba
└── (empty)

$ 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 でいいのかな？？

$ npm install --legacy-peer-deps reactn@latest
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
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 urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
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 @fortawesome/fontawesome@1.1.8: This package is deprecated. See https://git.io/fNCzJ for information about upgrading.
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 uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
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 @material-ui/system@4.12.1: You can now upgrade to @mui/system. See the guide: https://mui.com/guides/migration-v4/
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated @material-ui/styles@4.11.4: You can now upgrade to @mui/styles. See the guide: https://mui.com/guides/migration-v4/
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.
npm WARN deprecated @material-ui/core@4.12.3: You can now upgrade to @mui/material. See the guide: https://mui.com/guides/migration-v4/
npm WARN deprecated @material-ui/icons@4.11.2: You can now upgrade to @mui/icons. See the guide: https://mui.com/guides/migration-v4/

not fixed yet :

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.

$ yarn install
yarn install v1.22.18
warning ../package.json: No license field
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning @fortawesome/fontawesome@1.1.8: This package is deprecated. See https://git.io/fNCzJ for information about upgrading.
warning @material-ui/core@4.12.3: You can now upgrade to @mui/material. See the guide: https://mui.com/guides/migration-v4/
warning @material-ui/core > @material-ui/styles@4.11.4: You can now upgrade to @mui/styles. See the guide: https://mui.com/guides/migration-v4/
warning @material-ui/core > @material-ui/system@4.12.1: You can now upgrade to @mui/system. See the guide: https://mui.com/guides/migration-v4/
warning @material-ui/icons@4.11.2: You can now upgrade to @mui/icons. See the guide: https://mui.com/guides/migration-v4/
warning @testing-library/jest-dom > css > source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
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 > resolve-url-loader > rework > css > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning react-scripts > workbox-webpack-plugin > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning react-scripts > resolve-url-loader > rework > css > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
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 > webpack > micromatch > snapdragon > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning react-scripts > resolve-url-loader > rework > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning react-scripts > resolve-url-loader > rework > css > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning react-scripts > resolve-url-loader > rework > css > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
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-dev-server > webpack-log > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
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 @fortawesome/fontawesome-svg-core@1.3.0: Please upgrade to 6.1.0. https://fontawesome.com/docs/changelog/
warning @fortawesome/fontawesome-svg-core > @fortawesome/fontawesome-common-types@0.3.0: Please upgrade to 6.1.0. https://fontawesome.com/docs/changelog/
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
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.
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 158.07s.
yarn install  89.83s user 165.30s system 160% cpu 2:39.20 total

  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

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.

$ npm ls babel-loader 
movidea@0.1.0 /Users/nishio/kozaneba
└─┬ react-scripts@4.0.3
  └── babel-loader@8.1.0

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

$ 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)

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

がエラーで死んだ :

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 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  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

Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED - Stack Overflow $ export NODE_OPTIONS=--openssl-legacy-provider

/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";

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} />,

 npm WARN deprecated @material-ui/core@4.12.3: You can now upgrade to @mui/material. See the guide: https://mui.com/guides/migration-v4/
 npm WARN deprecated @material-ui/icons@4.11.2: You can now upgrade to @mui/icons. See the guide: https://mui.com/guides/migration-v4/

🪴 Quartz 4.0

2022-03-23

Graph View

Backlinks