新）ESLint: Failed to load config

[shari-sushi]

\pages> npm run build

> 0016api@0.1.0 build
> next build

   Linting and checking validity of types  ... ⨯ ESLint: Failed to load config "next/babel" to extend from. Referenced from: \myapp\.eslintrc.json
 ✓ Linting and checking validity of types    
uncaughtException [Error: EPERM: operation not permitted, open \myapp\.next\trace'] {
  errno: -4048,
  code: 'EPERM',
  syscall: 'open',
  path: \\myapp\\.next\\trace'
}
   Creating an optimized production build  .

※この時点ではたしか、buildはできていて、startもできる。

[shari-sushi]

ブランチは#85 と共通

---

Front-end Tech Blog. コムテブログ

error ESLint: Failed to load config "prettier" to extend from.
デプロイ時に以下のようなエラーが出るときがあります。

- error ESLint: Failed to load config "prettier" to extend from. Referenced from: /vercel/path0/.eslintrc.json
このエラーメッセージは、Vercel でのデプロイ時に ESLint の設定で問題が発生していたときに表示されました。原因を追うと、eslintrc.json の設定ミスや、 ; , などの記号が、VSCode の自動整形により削除されていたことが原因でした。

ESLint での自動整形に加え、VSCode で保存したときに自動的に整形されるように設定していたのですが、その設定が正しく行われていなかったために、デプロイ時にエラーが発生していました。

この問題は、ローカルでデプロイするときも同じように発生します。

【VSCode】settings.jsonについて理解する

現状の自分

{
    "workbench.sideBar.location": "right",
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit"
    },
    "editor.defaultFormatter": "vscode.typescript-language-features",
    "editor.formatOnSave": true,
    "editor.bracketPairColorization.enabled": false,
    "go.lintOnSave": "file",
    "[go]": {
      "editor.defaultFormatter": "golang.go"
    },
    "go.gopath": "",
    "go.languageServerFlags": [
  
    ],
    "go.toolsGopath": "",
    "go.alternateTools": {},
    "eslint.codeActionsOnSave.rules": null,
    "workbench.statusBar.visible": false,
    "workbench.colorCustomizations": {},
    "json.schemas": [

    ],
    "editor.minimap.enabled": false,
    "window.zoomLevel": -1.3,
    "files.associations": {
      "*.css": "tailwindcss"
    },
    "workbench.settings.applyToAllProfiles": [
      
    ]
  }

↑の内、↓が気になる。

    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit"
    },
    "editor.defaultFormatter": "vscode.typescript-language-features",

    "eslint.codeActionsOnSave.rules": null,

https://zenn.dev/ryusou/articles/nodejs-prettier-eslint2021

[shari-sushi]

これ以上進める前に、この問題に当たった当初に

\myapp> npm install --save-dev eslint-config-prettier 

added 1 package, and audited 449 packages in 2s

145 packages are looking for funding
  run npm fund for details

found 0 vulnerabilities

をしたが、その後特に何もしてなかった。

https://zenn.dev/naoki0722/articles/dcd489b97c0393#prettier-の整形ルール設定

に従って設定していく。

.eslint.json

{
- "extends": ["next", "next/core-web-vitals", "prettier", "next/babel"] 
+ "extends": ["next/core-web-vitals", "prettier"]
}

/package.json

  "scripts": {
-    "lint": "next lint" ,
+    "lint": "next lint --dir src",
+    "lint:fix": "yarn lint --fix",
  },

[shari-sushi]

また、Next.js, ESLint, TailWind CSSで作られたポートフォリオを発見したので、git cloneして動かしてみる。

git clone github.com/nyaruo_my-portfolio
npm install

動かない…
nodeのバージョンがダメそうだったからdocker使ってみたけどdocker上でも同じエラーなる