esbuildで公式の大事さを認識したので共有します。

APIの新しい使い方として、React Queryがアツいと聞いたので、インストールしようと思ったら、自分ではどうしようもないエラーに遭遇したので、自戒と公式の重要性も兼ねて記事にします。

結論

自分では解決できない問題でした。公式が対応するのを待つ必要がありました。

問題に遭遇した経緯

React Queryを使おうと思って、以下のコマンドを叩いのが全てのはじまり

$ npm install @tanstack/react-query

そうするとこんなエラーがでました↓

removed 2 packages, changed 2 packages, and audited 402 packages in 2s

72 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

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

Run `npm audit` for details.

試したこと(ダメだったこと)

1.npm audit fixを使う

$ npm audit fix

変わらず同じエラーが....

2.npm auditを叩いて原因究明

$ npm audit

すると....

# npm audit report

esbuild  <=0.24.2
Severity: moderate
esbuild enables any website to send any requests to the development server and read the response - https://github.com/advisories/GHSA-67mh-4wv8-2f99
fix available via `npm audit fix --force`
Will install esbuild@0.25.0, which is a breaking change
node_modules/esbuild
  vite  >=0.11.0
  Depends on vulnerable versions of esbuild
  node_modules/vite

2 moderate severity vulnerabilities

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

「ふむふむ、どうやらesbuildが悪さをしているようだ。んじゃ、esbuild0.25.0をインストールしてみっか」
と以下のコマンドを叩くと...

$ npm install esbuild@0.25.0

また、同じエラーが....

removed 2 packages, changed 2 packages, and audited 402 packages in 2s

72 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

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

Run `npm audit` for details.

3.node_modulesをクリーンリンストールする

仕方がないので、ライブラリを入れ直すことに....

$ rm -rf node_modules package-lock.json && npm install

すると....

emoved 2 packages, changed 2 packages, and audited 402 packages in 2s

72 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

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

Run `npm audit` for details.

どうじて......

原因.....

原因は、viteにありました...。

package-lock.json

改めて、npm auditの内容をみるとviteが絡んでいたそうで、とりあえずviteのpackage-lock.jsonを見てみました。

package-lock.json

"node_modules/vite": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/vite/-/vite-6.1.0.tgz",
      "integrity": "sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "esbuild": "^0.24.2",
        "postcss": "^8.5.1",
        "rollup": "^4.30.1"
      },

これをみて鋭い方はお気付きでしょう。そうViteはセキュリティパッチが当たる前のesbuildしか対応していないのです。

Viteの公式Githubではissuesが立てられてました。

というように、viteが対応するのを「待て」ということでした。
これは他のブログなどには書かれていなかったため、やっぱり公式を確認するのは重要だよね、と再確認させられるものでした。