チュートリアルにしたがってNode.js v17がインストールされると、yarn startでエラーになる about book

[t-yng]

Node.js v17 環境で yarn start を実行したら、エラーが発生した。👀

ヾ(*・ω・)ノ ~/workspace/react-tutorial/like-button  [ main ]
$ node -v

v17.0.1

ヾ(*・ω・)ノ ~/workspace/react-tutorial/like-button  [ main ]
$ yarn start
yarn run v1.22.17
$ react-scripts start
node:internal/modules/cjs/loader:488
      throw e;
      ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/tomohiro/workspace/react-tutorial/like-button/node_modules/postcss-safe-parser/node_modules/postcss/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/tomohiro/workspace/react-tutorial/like-button/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v17.0.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[t-yng]

該当のissueは↓を参照
facebook/create-react-app#11565

やり取りを見る感じだと素直にv16を使うのが良さそう

[t-yng]

yarn.lock をアップデートしてパッケージを再インストールしたら別のエラーが発生した。🥲

$ yarn start
yarn run v1.22.17
$ react-scripts start
ℹ ｢wds｣: Project is running at http://192.168.0.204/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /Users/tomohiro/workspace/react-tutorial/like-button/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

/Users/tomohiro/workspace/react-tutorial/like-button/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:130:10)
    at module.exports (/Users/tomohiro/workspace/react-tutorial/like-button/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/tomohiro/workspace/react-tutorial/like-button/node_modules/webpack/lib/NormalModule.js:417:16)
    at /Users/tomohiro/workspace/react-tutorial/like-button/node_modules/webpack/lib/NormalModule.js:452:10
    at /Users/tomohiro/workspace/react-tutorial/like-button/node_modules/webpack/lib/NormalModule.js:323:13
    at /Users/tomohiro/workspace/react-tutorial/like-button/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/tomohiro/workspace/react-tutorial/like-button/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/tomohiro/workspace/react-tutorial/like-button/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/tomohiro/workspace/react-tutorial/like-button/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.0.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[t-yng]

↑はOS依存のエラーっぽいが、解決策として実行時に NODE_OPTIONS=--openssl-legacy-provider を指定する必要がありそうだった。
webpack/webpack#14532 (comment)