Zenn
🎉

npm audit fix --force しても直らない！〜TypeScriptとReact/Next.js本5章で発生した問題を解決する

2022/08/22に公開
Node.js
Storybook
npm
#
環境構築
tech

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
5章で環境構築中に発生した警告が気になったので解決メモです。

問題のpackage.json(5章最後）

package.json
{
  "name": "can-badge-market-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --dir src",
    "format": "next lint --fix --dir src",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "test": "jest"
  },
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.1",
    "next": "12.2.5",
    "react": "18.2.0",
    "react-content-loader": "^6.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.34.2",
    "swr": "^1.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
    "@mdx-js/react": "^2.1.3",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-essentials": "^6.4.22",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-webpack5": "^6.5.10",
    "@storybook/manager-webpack5": "^6.5.10",
    "@storybook/react": "^6.1.21",
    "@storybook/testing-library": "^0.0.13",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@types/node": "18.7.8",
    "@types/react": "18.0.17",
    "@types/react-content-loader": "^4.0.0",
    "@types/react-dom": "18.0.6",
    "@typescript-eslint/eslint-plugin": "^5.33.1",
    "@typescript-eslint/parser": "^5.33.1",
    "autoprefixer": "^10.4.8",
    "babel-loader": "^8.2.5",
    "eslint": "^8.22.0",
    "eslint-config-next": "12.2.5",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-storybook": "^0.6.4",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "postcss": "^8.4.16",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.1.8",
    "tsconfig-paths-webpack-plugin": "^4.0.0",
    "typescript": "4.7.4",
    "typescript-eslint": "^0.0.1-alpha.0"
  }
}

#npm installするたびに警告される。
22 high severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

22件の深刻度の高い脆弱性

注意を払う必要のない問題に対処するために、実行します。
npm audit fix

いくつかの問題はレビューが必要であり、別の依存関係を選択する必要があるかもしれません。
別の依存関係を選択する必要があるかもしれません。（DeepL翻訳）

npm audit fixしても
npm audit fix --forceしても

解決できなかったので、調べたことや解決策をメモっておきます。

経緯：

https://zenn.dev/kugyu10/articles/ab393a8e8ba334

そもそも何が起きているの？

↓↓間違っていたらご指摘ください。↓↓

npmとは、

Javascriptのパッケージを管理するシステム。
Node.jsをいれたらついてきます。

パッケージ（ライブラリと言ったりもする）とは、
他のプログラムから利用することを目的としたプログラム
（モジュールと言ったりもする）を一纏めにしたもの。

パッケージやモジュールは
node_modules/　ディレクトリに入っていきます。

ちなみに、npmと似たような
パッケージ管理できるものに
yarnやpnpmがあります。

本書ではnpmを使っていた、という理由だけで
今のところnpmを採用しています。

package.jsonとは、

npmが理解できるように、
あなたのプロジェクトのパッケージの
「依存関係」を記述したJSONファイルのこと。

npm -i (パッケージ名)

みたいに、新しいパッケージを
プロジェクトにインストールするたびに
このファイルの記述が増えるイメージです。

なので、あなたが、使うパッケージの
バージョンを上げたい/下げたい　などあったら
package.jsonを編集します。記述方法は割愛。

ぼくのプロジェクトでは
@storybook/addon-docsや
@storybook/addon-essentialsや
その他もろもろたくさん必要なんだけど、
package.jsonをみていい感じにお願いしますね！

と、npmさんに丸投げするためのファイルです。

Githubなどからpackage.jsonをもってきた場合、
動かす前に
npm installをしてpackage.jsonに記述されてる
モジュール/パッケージを全部インスコする必要があります。

package-lock.jsonとは、

前述の通りpackage.jsonには、
あなたのプロジェクトに必要な依存モジュール/パッケージが
記述されてます。

一方、package-lock.jsonには、
依存モジュール/パッケージが、依存するモジュール/パッケージも、
自動的に記述されます。

ぼくのプロジェクトでは、
@storybook/addon-docsを使うんだけど、
それには@storybook/core-commonが必要で、
それにはwebpackが必要なんだけど、
それが動くにはwatchpackってやつが必要で、
それにはchokidarが必要で
それにはglob-parentが必要なんだ・・・

みたいなことが延々と記述されてます。

後述する glob-parent　依存ツリー出力結果
（ぼくのプロジェクト）
├─┬ @storybook/addon-docs@6.5.10
│ └─┬ @storybook/core-common@6.5.10
│   └─┬ webpack@4.46.0
│     └─┬ watchpack@1.7.5
│       └─┬ watchpack-chokidar2@2.0.1
│         └─┬ chokidar@2.1.8
│           └── glob-parent@3.1.0

依存関係でいうと、子、孫、ひ孫、やしゃご、、、
みたいな複雑かつ深い関係が発生するのが通常です。

glob-parentなんてパッケージ、
インストールした覚えがないんだけどな、

って思ってたけど、そのパッケージで今回警告がでました。
それはこういう理由からだったんですね。

package-lock.jsonは、基本的には開発者が編集してはいけません

（ま、今回、いじっちゃうんだけど）

package-lock.jsonは、Git管理化におくべきです

node_modulesとは、

package.json、そして
package-lock.jsonを元にして
インストールされる各種モジュール/パッケージの
保存ディレクトリ。

通常は.gitignoreして、Git管理下に置きません

npm install
すればおなじことが起きるから不要です。

正確に言うと、
モジュール・パッケージのマイナーバージョンアップなどは
日々発生しています。

npm installするたびに、package.jsonで
許されている範囲でパッケージ/モジュールの
バージョンアップが行われます。

その差異はプロジェクトの変更ではない、検出すべきでない差異だからです。

で、今回の警告の原因は？

モジュール/パッケージで脆弱性が報告されることがあります。
大抵、すぐに修正されたバージョンがリリースされるので
そのバージョンを使えばOKなのですが、

どこかの子パッケージ、孫パッケージ、ひ孫パッケージが
「前のバージョンの、このパッケージ使いたい」
と依存関係を記述したままのことがあります。

（新しいバージョンのパッケージが
　仕様変更してしまう可能性は常にあるから、
マイナーバージョンアップだけゆるす、みたいな
指定をしていることがほとんどです）

カンタンなものなら

npm audit fix
npm audit fix --force

で直せるのですが、

storybookの依存関係はややこしいのか、
今回それでは直せない警告が発生してしまった、ということです、多分。

↑↑間違っていたらご指摘ください。↑↑

直し方、参考にした記事

https://zenn.dev/mizuki/articles/1b958248024875

神。

package-lock.jsonを直接直して、
node_modulesを全部消して
npm installをしなおす、という方法。

①まず、npm audit

Terminal
npm audit

# npm audit report

glob-parent  <5.1.2
Severity: high
glob-parent before 5.1.2 vulnerable to Regular Expression Denial of Service in enclosure regex - https://github.com/advisories/GHSA-ww39-953v-wcq6
No fix available
node_modules/cpy/node_modules/glob-parent
node_modules/watchpack-chokidar2/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/watchpack-chokidar2/node_modules/chokidar
    watchpack-chokidar2  *
    Depends on vulnerable versions of chokidar
    node_modules/watchpack-chokidar2
      watchpack  1.7.2 - 1.7.5
      Depends on vulnerable versions of watchpack-chokidar2
      node_modules/@storybook/core-common/node_modules/watchpack
        webpack  4.44.0 - 4.46.0
        Depends on vulnerable versions of watchpack
        node_modules/@storybook/core-common/node_modules/webpack
  fast-glob  <=2.2.7
  Depends on vulnerable versions of glob-parent
  node_modules/cpy/node_modules/fast-glob
    globby  8.0.0 - 9.2.0
    Depends on vulnerable versions of fast-glob
    node_modules/cpy/node_modules/globby
      cpy  7.0.0 - 8.1.2
      Depends on vulnerable versions of globby
      node_modules/cpy
        @storybook/core-server  <=7.0.0-alpha.6
        Depends on vulnerable versions of @storybook/csf-tools
        Depends on vulnerable versions of @storybook/csf-tools
        Depends on vulnerable versions of cpy
        node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/node_modules/@storybook/core/node_modules/@storybook/core-server
        node_modules/@storybook/addon-essentials/node_modules/@storybook/react/node_modules/@storybook/core/node_modules/@storybook/core-server
        node_modules/@storybook/core-server
          @storybook/core  >=6.2.0-alpha.0
          Depends on vulnerable versions of @storybook/core-server
          node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/node_modules/@storybook/core
          node_modules/@storybook/addon-essentials/node_modules/@storybook/react/node_modules/@storybook/core
          node_modules/@storybook/core
            @storybook/addon-docs  *
            Depends on vulnerable versions of @mdx-js/mdx
            Depends on vulnerable versions of @storybook/core
            Depends on vulnerable versions of @storybook/csf-tools
            Depends on vulnerable versions of @storybook/mdx1-csf
            Depends on vulnerable versions of @storybook/react
            node_modules/@storybook/addon-docs
            node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs
              @storybook/addon-essentials  <=5.3.0-rc.14 || 6.0.0-alpha.0 - 6.5.0-rc.1
              Depends on vulnerable versions of @storybook/addon-docs
              node_modules/@storybook/addon-essentials
            @storybook/react  6.2.0-alpha.0 - 6.5.11-alpha.0
            Depends on vulnerable versions of @storybook/core
            node_modules/@storybook/addon-essentials/node_modules/@storybook/react
            node_modules/@storybook/react

trim  <0.0.3
Severity: high
Regular Expression Denial of Service in trim - https://github.com/advisories/GHSA-w5p7-h5w8-2hfq
No fix available
node_modules/trim
  remark-parse  <=8.0.3
  Depends on vulnerable versions of trim
  node_modules/remark-parse
    @mdx-js/mdx  <=1.6.22
    Depends on vulnerable versions of remark-mdx
    Depends on vulnerable versions of remark-parse
    node_modules/@mdx-js/mdx
      @mdx-js/loader  0.15.5 - 1.6.22
      Depends on vulnerable versions of @mdx-js/mdx
      node_modules/@mdx-js/loader
      @storybook/addon-docs  *
      Depends on vulnerable versions of @mdx-js/mdx
      Depends on vulnerable versions of @storybook/core
      Depends on vulnerable versions of @storybook/csf-tools
      Depends on vulnerable versions of @storybook/mdx1-csf
      Depends on vulnerable versions of @storybook/react
      node_modules/@storybook/addon-docs
      node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs
        @storybook/addon-essentials  <=5.3.0-rc.14 || 6.0.0-alpha.0 - 6.5.0-rc.1
        Depends on vulnerable versions of @storybook/addon-docs
        node_modules/@storybook/addon-essentials
      @storybook/csf-tools  <=6.5.11-alpha.0
      Depends on vulnerable versions of @mdx-js/mdx
      Depends on vulnerable versions of @storybook/mdx1-csf
      node_modules/@storybook/addon-essentials/node_modules/@storybook/csf-tools
      node_modules/@storybook/csf-tools
        @storybook/core-server  <=7.0.0-alpha.6
        Depends on vulnerable versions of @storybook/csf-tools
        Depends on vulnerable versions of @storybook/csf-tools
        Depends on vulnerable versions of cpy
        node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/node_modules/@storybook/core/node_modules/@storybook/core-server
        node_modules/@storybook/addon-essentials/node_modules/@storybook/react/node_modules/@storybook/core/node_modules/@storybook/core-server
        node_modules/@storybook/core-server
          @storybook/core  >=6.2.0-alpha.0
          Depends on vulnerable versions of @storybook/core-server
          node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs/node_modules/@storybook/core
          node_modules/@storybook/addon-essentials/node_modules/@storybook/react/node_modules/@storybook/core
          node_modules/@storybook/core
            @storybook/react  6.2.0-alpha.0 - 6.5.11-alpha.0
            Depends on vulnerable versions of @storybook/core
            node_modules/@storybook/addon-essentials/node_modules/@storybook/react
            node_modules/@storybook/react
      @storybook/mdx1-csf  *
      Depends on vulnerable versions of @mdx-js/mdx
      node_modules/@storybook/mdx1-csf
    remark-mdx  <=1.6.22
    Depends on vulnerable versions of remark-parse
    node_modules/remark-mdx

trim-newlines  <3.0.1
Severity: high
Uncontrolled Resource Consumption in trim-newlines - https://github.com/advisories/GHSA-7p7h-4mm5-852v
fix available via `npm audit fix`
node_modules/trim-newlines
  meow  3.4.0 - 5.0.0
  Depends on vulnerable versions of trim-newlines
  node_modules/meow

22 high severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

まとめると、

glob-parent  <5.1.2
trim  <0.0.3
trim-newlines  <3.0.1

の3つにhighな脆弱性が見つかっている、ということらしい。

②ひとつずつ、npm ls する

npm auditのログだとみずらいので、npm ls (パッケージ名)で依存関係をみてみる

npm ls glob-parent

can-badge-market-nextjs@0.1.0 /Users/kugyu10/work/practice/can-badge-market-nextjs
├─┬ @storybook/addon-docs@6.5.10
│ └─┬ @storybook/core-common@6.5.10
│   └─┬ webpack@4.46.0
│     └─┬ watchpack@1.7.5
│       └─┬ watchpack-chokidar2@2.0.1
│         └─┬ chokidar@2.1.8
│           └── glob-parent@3.1.0
├─┬ @storybook/react@6.5.10
│ └─┬ @storybook/core@6.5.10
│   └─┬ @storybook/core-server@6.5.10
│     └─┬ cpy@8.1.2
│       └─┬ globby@9.2.0
│         └─┬ fast-glob@2.2.7
│           └── glob-parent@3.1.0
├─┬ eslint@8.22.0
│ └── glob-parent@6.0.2
└─┬ tailwindcss@3.1.8
  ├─┬ chokidar@3.5.3
  │ └── glob-parent@5.1.2
  ├─┬ fast-glob@3.2.11
  │ └── glob-parent@5.1.2
  └── glob-parent@6.0.2 deduped

npm ls trim

can-badge-market-nextjs@0.1.0 /Users/kugyu10/work/practice/can-badge-market-nextjs
└─┬ @storybook/addon-docs@6.5.10
  └─┬ @storybook/mdx1-csf@0.0.1
    └─┬ @mdx-js/mdx@1.6.22
      └─┬ remark-parse@8.0.3
        └── trim@0.0.1

npm ls trim-newlines

can-badge-market-nextjs@0.1.0 /Users/kugyu10/work/practice/can-badge-market-nextjs
└─┬ @storybook/react@6.5.10
  └─┬ @storybook/core@6.5.10
    └─┬ @storybook/core-server@6.5.10
      └─┬ x-default-browser@0.4.0
        └─┬ default-browser-id@1.0.4
          └─┬ meow@3.7.0
            └── trim-newlines@1.0.0

③package-lock.jsonをいじる

前述したとおり、直接編集は推奨されないファイルなので、
依存関係を壊してしまう可能性があります。

現バージョンをコミットしておいたり、
退避したりしておくといいです。

とりあえず、何も考えずに
指摘されたバージョンを最新版に置き換えてみます。
（最新じゃないけど、脆弱でもないバージョンは放置）

ライブラリ 脆弱性のあるバージョン 2022.8.22時のLatest
glob-parent <5.1.2 6.0.2
trim <0.0.3 1.0.1
trim-newlines <3.0.1 4.0.2

全部で10箇所以上あったけど

package-lock.json
-        "trim-newlines": "^1.0.0"
+        "trim-newlines": "^4.0.2"

などのように、書き換えました。

④node_modulesを削除

ゴリッと削除するコマンドなので注意。

sudo rm -rf node_modules/

30秒くらい待つ

⑤npm install しなおし

npm install

5分以上待ったのでコーヒーでも。

14 high severity vulnerabilities

ここでまたseverity vulnerabilities警告でてしまいました。

もう一度npm audit fixからやり直します。

npm audit fix

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
...

だめか、

npm audit fix --force

npm WARN using --force Recommended protections disabled.
npm WARN audit No fix available for @storybook/addon-docs@*

added 6 packages, removed 513 packages, changed 3 packages, and audited 2229 packages in 31s

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

found 0 vulnerabilities

お？

消えた？

⑥起動確認

npm run test
npm run dev
npm run storybook

一通り問題なかったので解決！

結論

  • package-lock.json を直接直して、
  • node_modules/を全部消して、
  • npm install して、
  • npm audit fix --force する

で、ぼくの環境では解決しました。

GitHubで編集を提案

Discussion