※Create React App は、2022-04-12 を最後にアップデートが終わり、2025年現在はこちらは古いやり方なのだとご指摘いただきました！※
MacでNode.jsとyarnのインストール後、「これから、フォルダ内に作るぞ！」というところで、つまずきました。
・バージョンの不一致
・脆弱性の修正
・Web-vitalsが無い
この３つを解決して、無事、環境を構築できましたので記していきます。
最初のつまずき
新しいReactプロジェクト作成の、次のコマンドを打ち込みました。
MacBook-Pro:~ desktop username$ npx create-react-app sample
すると出てきたエラーの弾幕
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: sample@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 /Users/username/.npm/_logs/2025-01-26T13_28_44_816Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/username/.npm/_logs/2025-01-26T13_28_44_816Z-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
…。
初っ端から弾幕でビビりましたが、AIにも聞きながら、解決していこうと思います。
行動１：reactのバージョンを18.3.1に落とす
上記の記述を見ると「.npm」の「_logs」の中にエラーレポートがあるようなので見にいきます。
Finderから「⌘ shift .」で隠しファイルを表示させて、「.npm > _logs」からレポートを見にいくと次の記述でした。
While resolving: sample@0.1.0
Found: react@19.0.0
node_modules/react
react@"^19.0.0" from the root project
Could not resolve dependency:
peer react@"^18.0.0" from @testing-library/react@13.4.0
node_modules/@testing-library/react
@testing-library/react@"^13.0.0" from the root project
「@testing-library/react は、reactのバージョン18.0.0 を必要としているのに、プロジェクトでは reactのバージョン19.0.0 が使用されています。」とのことで、バージョンが一致していないことが原因のようです。
該当のディレクトリ(この場合はsampleフォルダ)に移動して、「package.json」ファイルの「dependencies」の記述内のreactのバージョンを18.3.1にします。
$ cd sample
$ npm install -save react@18.3.1 react-dom@18.3.1
行動２：脆弱性の修正
今度は次の記述が出てしまいました。
「8つの脆弱性があり、うち６つは高いレベル(できるだけ早い対応が必要)の脆弱性です」
added 1 package, changed 4 packages, and audited 1326 packages in 3s
268 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で詳細を確認します。以下は詳細。
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
原因は
「nth-checkのバージョンが2.0.1より低い(そしてそれに付随する諸々)」
「postcssのバージョンが8.4.31より低い」
ということにありそうです。
念のため$ npm ls nth-checkで、「nth-check」のバージョンを確認。
確かに「@svgr/webpack@5.5.0」の分岐にある「nth-check」のバージョンが1.0.2で、2.0.1より低く脆弱でした。
sample@0.1.0 /Users/username/Desktop/sample
└─┬ 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
└─┬ 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
同じく$ npm ls postcssで、「postcss」のバージョンも確認。
「postcss」のバージョンが7.0.39で、8.4.31より低く脆弱でした。
└─┬ react-scripts@5.0.1
（略）
├─┬ resolve-url-loader@4.0.0
│ └── postcss@7.0.39
最初の記述で、これらの脆弱性は
$ npm audit fix --forceで解決するよとのことでしたので、このコマンドを実行します。
ところが！脆弱性が163個に増えてしまいました！笑
どうして…構造が複雑だったのでしょうか。
163 vulnerabilities (1 low, 121 moderate, 38 high, 3 critical)
もう一度
$ npm audit fix --force
とすると、「8つの脆弱性があり、うち６つは高いレベル(できるだけ早い対応が必要)の脆弱性です」という、前の段階に戻り堂々巡りになったので、「package.json」に「overrides」することにしました。
「package.json」を開いて、「dependencies 」の下に 「overrides」というセクションを追加します。
「nth-check」と「postcss」のバージョンを記述していきます。
"dependencies": {
"cra-template": "1.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "^5.0.1"
},
"overrides": {
"nth-check": ">=2.0.1",
"postcss": ">=8.4.31"
},
これでファイルを保存し、
$ npm install
とコマンドを実行して、overrides に指定したバージョンにパッケージを更新します。
脆弱性が0個になりました！
found 0 vulnerabilities
行動３：web-vitals のインストール(+α)
これで$ yarn startとしました。
「いよいよ、Reactが立ち上がるのか…！」と期待しましたが…
ブラウザが立ち上がったものの、またしてもエラーです。
ターミナルのエラー表示は以下。
Failed to compile.
Module not found: Error: Can't resolve 'web-vitals' in '/Users/username/Desktop/sample/src'
ERROR in ./src/reportWebVitals.js 5:4-24
Module not found: Error: Can't resolve 'web-vitals' in '/Users/username/Desktop/sample/src'
webpack compiled with 1 error
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
エラーが２つあるようです。
①Web-vitalsというモジュールがありません。
②babel-preset-react-appの依存関係が適切ではありません。これはcreate-react-app プロジェクトの一部ですがもうメンテナンスされていません。このバグが修正される可能性はないので、devDependenciesに@babel/plugin-proposal-private-property-in-objectを追加して、エラーメッセージを消しましょう。
①
Web-vitalsをインストールします。
$ npm install web-vitals
②
babel-preset-react-app の問題を回避します。
npm install --save-dev @babel/plugin-proposal-private-property-in-object
これで、今度こそ実行…！
$ yarn start
無事に新規Reactがブラウザで立ち上がりました！
※何か間違いもございましたら、ご指摘ください！