はじめに
こんにちは！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プロジェクト開始に切り替えました。
以上が今回確認できた内容になります。