はじめに

こんにちは！2025年2月からエンジニアとしてのキャリアをスタートさせる駆け出しエンジニアです。
久しぶりにReactでのwebアプリ開発を始めようと、create-react-appコマンドを実行したところ、パッケージの依存関係の警告が出てしまいました。
今回は、その対処法や警告の内容についてまとめていきます。

対処法

結論として、create-react-appではなくviteを使ってreactプロジェクトを開始しました。
以下の記事の通りに進めたところ、とても簡単にReactプロジェクトを開始することができました。

create-react-appは2023年春よりメンテナンスされておらず、現在は非奨励となっているようです。
2025年1月現在、Reactの最新バージョンは19.0.0ですが、以前使っていたReact v18のプロジェクトをcreate-reaat-appで開始させようと色々試してみました。しかし、結局警告を解消することはできず、viteを使うことにしました。

警告の内容

まずは、create-react-appコマンドを実行。

$ npx create-react-app cra-app

→ 早速、以下の警告が出た。

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: cra-app@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error   @testing-library/react@"^13.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\gota4\AppData\Local\npm-cache\_logs\2025-01-03T00_43_28_540Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\gota4\AppData\Local\npm-cache\_logs\2025-01-03T00_43_28_540Z-debug-0.log
`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed

これは、@testing-library/react@13.4.0がreact@18.0.0までしか互換性がないのに対して、react@19.0.0がインストールされていることによる警告らしい。

react@19.0.0のままで警告を解消する方法は、以下の記事を参考。

次に、react@18.0.0へダウングレード。

$ npm install --save react@18.0.0 react-dom@18.0.0

→ 以下の警告が発生。８個の脆弱性があるとのこと。

changed 4 packages, and audited 1324 packages in 5s

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

8 vulnerabilities (2 moderate, 6 high)

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

Run `npm audit` for details.

npm auditコマンドで、脆弱性のあるパッケージについて確認。

$ npm audit

コマンド実行結果。

# npm audit report

nth-check  <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/svgo/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/svgo/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/svgo
      @svgr/plugin-svgo  <=5.5.0
      Depends on vulnerable versions of svgo
      node_modules/@svgr/plugin-svgo
        @svgr/webpack  4.0.0 - 5.5.0
        Depends on vulnerable versions of @svgr/plugin-svgo
        node_modules/@svgr/webpack
          react-scripts  >=2.1.4
          Depends on vulnerable versions of @svgr/webpack
          Depends on vulnerable versions of resolve-url-loader
          node_modules/react-scripts

postcss  <8.4.31
Severity: moderate
PostCSS line return parsing error - https://github.com/advisories/GHSA-7fh5-64p2-3v2j
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/resolve-url-loader/node_modules/postcss
  resolve-url-loader  0.0.1-experiment-postcss || 3.0.0-alpha.1 - 4.0.0
  Depends on vulnerable versions of postcss
  node_modules/resolve-url-loader

8 vulnerabilities (2 moderate, 6 high)

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

バージョン2.0.1以前のnth-checkパッケージと、8.4.31以前のpostcssパッケージが使用されており、それらに脆弱性があるとのこと。
npm audit fix --forceコマンドを実行することで、react-script@3.0.1がインストールされ、これらの脆弱性が解消されると書かれている。

$ npm audit fix --force

コマンド実行結果

added 626 packages, removed 403 packages, changed 397 packages, and audited 1547 packages in 2m

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

# npm audit report

ansi-html  <0.0.8
Severity: high
Uncontrolled Resource Consumption in ansi-html - https://github.com/advisories/GHSA-whgm-jr23-g3j9
fix available via `npm audit fix --force`
Will install react-scripts@5.0.1, which is a breaking change
node_modules/ansi-html
  webpack-dev-server  <=4.7.4
  Depends on vulnerable versions of ansi-html

（中略）

yargs-parser  6.0.0 - 13.1.1
Severity: moderate
yargs-parser Vulnerable to Prototype Pollution - https://github.com/advisories/GHSA-p9pc-299p-vxgp
fix available via `npm audit fix --force`
Will install react-scripts@5.0.1, which is a breaking change
node_modules/webpack-dev-server/node_modules/yargs-parser
  yargs  8.0.0-candidate.0 - 12.0.5
  Depends on vulnerable versions of yargs-parser
  node_modules/webpack-dev-server/node_modules/yargs

163 vulnerabilities (1 low, 121 moderate, 38 high, 3 critical)

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

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

package.json

"react-scripts": "^3.0.1"

上記npm audit fix --forceコマンドにより、react-script@5.0.1からreact-script@3.0.1に置き換わったことで、別のパッケージで163個の脆弱性が新たに発生。

react-script@5.0.1の方が脆弱性の数が圧倒的に少ないので、再度npm audit fix --forceコマンドを実行して、react-script@5.0.1に戻す。

$ npm audit fix --force

package.json

"react-scripts": "^5.0.1"

脆弱性があるnth-checkとpostcssパッケージの依存関係について確認。

$ npm ls nth-check postcss

コマンド実行結果

cra-app@0.1.0 C:\Users\gota4\Desktop\web-application-dev\20241228_React_random-image\cra-app
└─┬ react-scripts@5.0.1
  ├─┬ @svgr/webpack@5.5.0
  │ └─┬ @svgr/plugin-svgo@5.5.0
  │   └─┬ svgo@1.3.2
  │     └─┬ css-select@2.1.0
  │       └── nth-check@1.0.2                      #nth-check < 2.0.1
  ├─┬ css-loader@6.11.0
  │ ├─┬ icss-utils@5.1.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-modules-extract-imports@3.1.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-modules-local-by-default@4.2.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-modules-scope@3.2.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-modules-values@4.0.0
  │ │ └── postcss@8.4.49 deduped
  │ └── postcss@8.4.49 deduped
  ├─┬ css-minimizer-webpack-plugin@3.4.1
  │ ├─┬ cssnano@5.1.15
  │ │ ├─┬ cssnano-preset-default@5.2.14
  │ │ │ ├─┬ css-declaration-sorter@6.4.1
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ cssnano-utils@3.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-calc@8.2.4
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-colormin@5.3.1
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-convert-values@5.1.3
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-discard-comments@5.1.2
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-discard-duplicates@5.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-discard-empty@5.1.1
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-discard-overridden@5.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-merge-longhand@5.1.7
  │ │ │ │ ├── postcss@8.4.49 deduped
  │ │ │ │ └─┬ stylehacks@5.1.1
  │ │ │ │   └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-merge-rules@5.1.4
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-minify-font-values@5.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-minify-gradients@5.1.1
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-minify-params@5.1.4
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-minify-selectors@5.2.1
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-normalize-charset@5.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-normalize-display-values@5.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-normalize-positions@5.1.1
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-normalize-repeat-style@5.1.1
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-normalize-string@5.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-normalize-timing-functions@5.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-normalize-unicode@5.1.1
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-normalize-url@5.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-normalize-whitespace@5.1.1
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-ordered-values@5.1.3
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-reduce-initial@5.1.2
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-reduce-transforms@5.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-svgo@5.1.0
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ ├─┬ postcss-unique-selectors@5.1.1
  │ │ │ │ └── postcss@8.4.49 deduped
  │ │ │ └── postcss@8.4.49 deduped
  │ │ └── postcss@8.4.49 deduped
  │ └── postcss@8.4.49 deduped
  ├─┬ html-webpack-plugin@5.6.3
  │ └─┬ pretty-error@4.0.0
  │   └─┬ renderkid@3.0.0
  │     └─┬ css-select@4.3.0
  │       └── nth-check@2.1.1
  ├─┬ postcss-flexbugs-fixes@5.0.2
  │ └── postcss@8.4.49 deduped
  ├─┬ postcss-loader@6.2.1
  │ └── postcss@8.4.49 deduped
  ├─┬ postcss-normalize@10.0.1
  │ ├─┬ postcss-browser-comments@4.0.0
  │ │ └── postcss@8.4.49 deduped
  │ └── postcss@8.4.49 deduped
  ├─┬ postcss-preset-env@7.8.3
  │ ├─┬ @csstools/postcss-cascade-layers@1.1.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-color-function@1.1.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-font-format-keywords@1.0.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-hwb-function@1.0.2
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-ic-unit@1.0.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-is-pseudo-class@2.0.7
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-nested-calc@1.0.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-normalize-display-values@1.0.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-oklab-function@1.1.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-progressive-custom-properties@1.3.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-stepped-value-functions@1.0.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-text-decoration-shorthand@1.0.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-trigonometric-functions@1.0.2
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ @csstools/postcss-unset-value@1.0.2
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ autoprefixer@10.4.20
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ css-blank-pseudo@3.0.3
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ css-has-pseudo@3.0.4
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ css-prefers-color-scheme@6.0.3
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-attribute-case-insensitive@5.0.2
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-clamp@4.1.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-color-functional-notation@4.2.4
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-color-hex-alpha@8.0.4
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-color-rebeccapurple@7.1.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-custom-media@8.0.2
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-custom-properties@12.1.11
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-custom-selectors@6.0.3
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-dir-pseudo-class@6.0.5
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-double-position-gradients@3.1.2
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-env-function@4.0.6
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-focus-visible@6.0.4
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-focus-within@5.0.4
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-font-variant@5.0.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-gap-properties@3.0.5
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-image-set-function@4.0.7
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-initial@4.0.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-lab-function@4.2.1
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-logical@5.0.4
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-media-minmax@5.0.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-nesting@10.2.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-opacity-percentage@1.1.3
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-overflow-shorthand@3.0.4
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-page-break@3.0.4
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-place@7.0.5
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-pseudo-class-any-link@7.1.6
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-replace-overflow-wrap@4.0.0
  │ │ └── postcss@8.4.49 deduped
  │ ├─┬ postcss-selector-not@6.0.1
  │ │ └── postcss@8.4.49 deduped
  │ └── postcss@8.4.49 deduped
  ├── postcss@8.4.49
  ├─┬ resolve-url-loader@4.0.0
  │ └── postcss@7.0.39                              #postcss < 8.4.31
  └─┬ tailwindcss@3.4.17
    ├─┬ postcss-import@15.1.0
    │ └── postcss@8.4.49 deduped
    ├─┬ postcss-js@4.0.1
    │ └── postcss@8.4.49 deduped
    ├─┬ postcss-load-config@4.0.2
    │ └── postcss@8.4.49 deduped
    ├─┬ postcss-nested@6.2.0
    │ └── postcss@8.4.49 deduped
    └── postcss@8.4.49 deduped

上記のコメントした部分で、脆弱性のある古いバージョンのパッケージが使われているようです。
この古いバージョンのパッケージを最新バージョンに置き換えることができれば、脆弱性を解消できるのではないかと思います。しかし、今回はその方法の調査までには至れず、viteでのReactプロジェクト開始に切り替えました。

以上が今回確認できた内容になります。