Q&A
npm audit は無視しても良かったような。
https://zenn.dev/appare45/articles/7f667031aab94b
また、eslint は create-react-app すると (react-scripts の依存関係で) 自動的に入るはず…。
実現したいこと
- react+typescriptで環境を構築し、eslintをインストールする
前提
ここに質問の内容を詳しく書いてください。
（例）
react+typescriptで環境構築をし、eslintをインストールしようとすると依存関係が競合してインストールすることができませんでした。ネットの情報などでは特に問題なくできてそうなので何故依存関係が競合してしまうのかが分かりません。（そもそもインストールできない理由が依存関係が競合してるからだと決めつけていますがそれが理由なのかも分かりません。）react,typescriptは初めて触っているので全然詳しくないです。
何か解決策が分かる方がいらっしゃったら教えていただきたいです。
以下の手順で環境を構築しています。
発生している問題・エラーメッセージ
/front$ npx create-react-app . --template typescript --use-npm ... removed 1 package, and audited 1502 packages in 2s 245 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. Success! Created front at /mnt/c/Users/ytaer/work/chatbus/front Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd /mnt/c/Users/ytaer/work/chatbus/front npm start Happy hacking! /front$ 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@2.1.3, 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 node_modules/react-scripts 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force /front$ sudo docker-compose exec front sh /front # npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: front@0.1.0 npm ERR! Found: @typescript-eslint/eslint-plugin@5.62.0 npm ERR! node_modules/@typescript-eslint/eslint-plugin npm ERR! @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1 npm ERR! node_modules/eslint-config-react-app npm ERR! eslint-config-react-app@"^7.0.1" from react-scripts@5.0.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm ERR! peerOptional @typescript-eslint/eslint-plugin@"^4.0.0 || ^5.0.0" from eslint-plugin-jest@25.7.0 npm ERR! node_modules/eslint-plugin-jest npm ERR! eslint-plugin-jest@"^25.3.0" from eslint-config-react-app@7.0.1 npm ERR! node_modules/eslint-config-react-app npm ERR! eslint-config-react-app@"^7.0.1" from react-scripts@5.0.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm ERR! 1 more (the root project) npm ERR! npm ERR! Could not resolve dependency: npm ERR! dev @typescript-eslint/eslint-plugin@"*" from the root project npm ERR! npm ERR! Conflicting peer dependency: @typescript-eslint/parser@6.7.2 npm ERR! node_modules/@typescript-eslint/parser npm ERR! peer @typescript-eslint/parser@"^6.0.0 || ^6.0.0-alpha" from @typescript-eslint/eslint-plugin@6.7.2 npm ERR! node_modules/@typescript-eslint/eslint-plugin npm ERR! dev @typescript-eslint/eslint-plugin@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! /root/.npm/_logs/2023-09-23T02_24_51_577Z-eresolve-report.txt npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2023-09-23T02_24_51_577Z-debug-0.log
package.jsonは以下の内容になっています。
該当のソースコード
package.json
1{ 2 "name": "front", 3 "version": "0.1.0", 4 "private": true, 5 "dependencies": { 6 "@testing-library/jest-dom": "^5.17.0", 7 "@testing-library/react": "^13.4.0", 8 "@testing-library/user-event": "^13.5.0", 9 "@types/jest": "^27.5.2", 10 "@types/node": "^16.18.53", 11 "@types/react": "^18.2.22", 12 "@types/react-dom": "^18.2.7", 13 "react": "^18.2.0", 14 "react-dom": "^18.2.0", 15 "react-scripts": "5.0.1", 16 "typescript": "^4.9.5", 17 "web-vitals": "^2.1.4" 18 }, 19 "scripts": { 20 "start": "react-scripts start", 21 "build": "react-scripts build", 22 "test": "react-scripts test", 23 "eject": "react-scripts eject" 24 }, 25 "eslintConfig": { 26 "extends": [ 27 "react-app", 28 "react-app/jest" 29 ] 30 }, 31 "browserslist": { 32 "production": [ 33 ">0.2%", 34 "not dead", 35 "not op_mini all" 36 ], 37 "development": [ 38 "last 1 chrome version", 39 "last 1 firefox version", 40 "last 1 safari version" 41 ] 42 } 43}
試したこと
npm audit fix --forceをするとvulnerabilitiesがさらに増えてしまいました。
補足情報
/front # npm -v
9.8.1
/front # node -v
v20.6.1
localhostに接続するとreactは起動しているようです。
react-scriptsをdevDependenciesに移動させて、eslintの初期化をしてみました。
/front # npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard-with-typescript@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^6.4.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0 eslint-plugin-promise@^6.0.0 typescript@*
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing eslint-plugin-react@latest, eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^6.4.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0, typescript@*
npm WARN idealTree Removing dependencies.typescript in favor of devDependencies.typescript
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: front@0.1.0
npm ERR! Found: @typescript-eslint/eslint-plugin@5.62.0
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app@"^7.0.1" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR! dev react-scripts@"5.0.1" from the root project
npm ERR! peerOptional @typescript-eslint/eslint-plugin@"^4.0.0 || ^5.0.0" from eslint-plugin-jest@25.7.0
npm ERR! node_modules/eslint-plugin-jest
npm ERR! eslint-plugin-jest@"^25.3.0" from eslint-config-react-app@7.0.1
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app@"^7.0.1" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR! dev react-scripts@"5.0.1" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @typescript-eslint/eslint-plugin@"^6.4.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @typescript-eslint/parser@6.7.2
npm ERR! node_modules/@typescript-eslint/parser
npm ERR! peer @typescript-eslint/parser@"^6.0.0 || ^6.0.0-alpha" from @typescript-eslint/eslint-plugin@6.7.2
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! dev @typescript-eslint/eslint-plugin@"^6.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /root/.npm/_logs/2023-09-23T05_21_38_291Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2023-09-23T05_21_38_291Z-debug-0.log
A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.js file in /front
/front # npx eslint --fix src/**/*.ts*
Oops! Something went wrong! :(
ESLint: 8.50.0
ESLint couldn't find the config "standard-with-typescript" to extend from. Please check that the name of the config is correct.
The config "standard-with-typescript" was referenced from the config file in "/front/.eslintrc.js".
If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
standard-with-typescriptが見つからないと出てしまいました
.eslintrc.jsを以下のようにしてstandard-with-typescriptをコメントアウトしてみました。多少変更も加えました。
```
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"react-app",
// "standard-with-typescript",
"plugin:react/recommended"
],
"parser": '@typescript-eslint/parser',
"settings": {
react: {
version: 'detect',
},
},
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
}
}
```
こうすると、npx eslint --fix src/**/*.ts*を実行してもエラーは出なくなりましたが、解決になっているのでしょうか？
依存関係のエラーは react-scripts@5.0.1 が古いバージョンの eslint 関連ライブラリに依存してるからっぽいですね。最新版を使いたいなら react-scripts というか create-react-app を脱却して自分であれこれ設定する必要がありそう…。(私はその辺の最新情報に追いついてないので、よく分かりません。ごめんなさい。)
自己解決
