【エラー解決】TypeError: crypto$2.getRandomValues is not a function

作成中のreact_todoでnpm run devを行うと以下のエラーが発生した。

Mac:react_todo shibatahiroshitaka$ npm run dev

> react_todo@0.0.0 dev
> vite

error when starting dev server:
TypeError: crypto$2.getRandomValues is not a function
    at resolveConfig (file:///Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:54238:16)
    at async _createServer (file:///Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:43843:18)
    at async CAC.<anonymous> (file:///Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/vite/dist/node/cli.js:750:20)

エラーの原因

Viteがcrypto.getRandomValues関数を利用しようとした際に、その関数が存在しないため。

Node.jsのバージョンが古いことが、関数が存在しない原因である可能性がある。

Node.jsのバージョンを確認・更新

バージョン確認すると、16.18.1だった。すでに最新の22.14.0をインストールしていたので、nvm install –ltsを行うとそのバージョンが使用された。node -vで、22.14.0を使っていることが確認できた。

Mac:react_todo shibatahiroshitaka$ node -v
v16.18.1
Mac:react_todo shibatahiroshitaka$ nvm install --lts
Installing latest LTS version.
v22.14.0 is already installed.
Now using node v22.14.0 (npm v10.9.2)
Creating default alias: default -> lts/* (-> v22.14.0)
Mac:react_todo shibatahiroshitaka$ node -v
v22.14.0

最初のエラーは解決した

これで、以下のエラーは解決した。

Mac:react_todo shibatahiroshitaka$ npm run dev

> react_todo@0.0.0 dev
> vite

error when starting dev server:
TypeError: crypto$2.getRandomValues is not a function
    at resolveConfig (file:///Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:54238:16)
    at async _createServer (file:///Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:43843:18)
    at async CAC.<anonymous> (file:///Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/vite/dist/node/cli.js:750:20)

再実行した結果はこちら。別のエラーが出ているので、別の記事で解決していこう。

Mac:react_todo shibatahiroshitaka$ npm run dev

> react_todo@0.0.0 dev
> vite


  VITE v6.2.2  ready in 586 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
Error:   Failed to scan for dependencies from entries:
  /Users/shibatahiroshitaka/Downloads/react/react_todo/index.html

  ✘ [ERROR] The JSX syntax extension is not currently enabled

    src/components/TaskList.js:20:4:
      20 │     <div>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.


    at failureErrorWithLog (/Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/esbuild/lib/main.js:1477:15)
    at /Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/esbuild/lib/main.js:946:25
    at runOnEndCallbacks (/Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/esbuild/lib/main.js:1317:45)
    at buildResponseToResult (/Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/esbuild/lib/main.js:944:7)
    at /Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/esbuild/lib/main.js:956:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (/Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/esbuild/lib/main.js:955:54)
    at handleRequest (/Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/esbuild/lib/main.js:648:17)
    at handleIncomingPacket (/Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/esbuild/lib/main.js:673:7)
    at Socket.readFromStdout (/Users/shibatahiroshitaka/Downloads/react/react_todo/node_modules/esbuild/lib/main.js:601:7)