reactの試作で起きたエラー

ひさびさにreactを触ったので、それで起きたエラーについての備忘録

⓵tailwindcss導入のエラー

エラー内容その１

tailwindcssは導入したのにtailwindがない？

PS C:\Users\react-todo> npm install -D tailwindcss postcss autoprefixer
>>

up to date, audited 1344 packages in 2s

268 packages are looking for funding
  run npm fund for details

12 vulnerabilities (6 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run npm audit for details.
PS C:\Users\Desktop\Apps-1\react-todo> npx tailwindcss init -p
>>
'tailwind' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

解決方法

とりあえずエラー内容にあったコードを実行

npm audit fix --force

npm audit fix

現在のプロジェクトの依存関係に対するセキュリティ監査を実行し、可能な限り安全に脆弱性を修正する。
パッケージのメジャーバージョンアップは行わず、互換性を維持する範囲で修正する。

--force

互換性を無視して、強制的に最新の脆弱性修正を適用する。
メジャーバージョンのアップグレードが含まれる可能性があり、プロジェクトが動かなくなるリスクがある。

エラー内容その2

それやったら次はこんなエラーが

PS C:\Users-react-todo> npx tailwindcss init -p
npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\tokumei\AppData\Local\npm-cache\_logs\2025-03-05T08_56_13_407Z-debug-0.log

解決方法

最終的に古いバージョンのインストールで解決！

npm install -D tailwindcss@3.4.13 autoprefixer postcss
npx tailwindcss init -p

⓶起動のエラー

下記のように普通に実行したら長々とエラーが

npm start

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (C:\Users\Desktop\Apps-1\react-todo\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (C:\Users\Desktop\Apps-1\react-todo\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (C:\Users\Desktop\Apps-1\react-todo\node_modules\webpack\lib\NormalModule.js:449:10)
    at C:\Users\Desktop\Apps-1\react-todo\node_modules\webpack\lib\NormalModule.js:481:5
    at C:\Users\Desktop\Apps-1\-react-todo\node_modules\webpack\lib\NormalModule.js:342:12
    at C:\Users\Desktop\Apps-1\-react-todo\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Users\Desktop\Apps-1\react-todo\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (C:\Users\Desktop\Apps-1\react-todo\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at C:\Users\Desktop\Apps-1\react-todo\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (C:\Users\Desktop\Apps-1\react-todo\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (C:\Users\Desktop\Apps-1\react-todo\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (C:\Users\Desktop\Apps-1\react-todo\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (C:\Users\Desktop\Apps-1\react-todo\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at C:\Users\Desktop\Apps-1\react-todo\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
(node:18628) [DEP0060] DeprecationWarning: The util._extend API is deprecated. Please use Object.assign() instead.
(Use node --trace-deprecation ... to show where the warning was created)
C:\Users\Desktop\Apps-1\react-todo\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (C:\Users\Desktop\Apps-1\react-todo\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (C:\Users\Desktop\Apps-1\react-todo\node_modules\webpack\lib\NormalModule.js:401:16)
    at C:\Users\Desktop\Apps-1\react-todo\node_modules\webpack\lib\NormalModule.js:433:10
    at C:\Users\Desktop\Apps-1\react-todo\node_modules\webpack\lib\NormalModule.js:308:13
    at C:\Users\Desktop\Apps-1\react-todo\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\Desktop\Apps-1\react-todo\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\react-todo\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\Users\Desktop\Apps-1\react-todo\node_modules\babel-loader\lib\index.js:51:103
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  opensslErrorStack: [
    'error:03000086:digital envelope routines::initialization error',
    'error:0308010C:digital envelope routines::unsupported'
  ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v22.14.0
PS C:\Users\react-todo> 

エラー解決方法

Node.jsのバージョンに関連する問題なので。
webpack と一部の依存関係が、Node.js 17 以降で発生する暗号化ライブラリの問題に関連しいるようです。

まずこれを試して

set NODE_OPTIONS=--openssl-legacy-provider
npm start

それでだめだったので

最新版にして解決

npm install react-scripts@latest