pnpm 환경에서의 eslint-config-next/core-web-vitals 에러

2025-07-13 18:52에 생성2025-07-15 15:07에 수정

문제점 왜 발생할까?해결법 1안) public-hoist-pattern 추가해주기 2안) 비공식 eslint-plugin-nextjs 사용하기 관련 이슈 및 링크

문제점

eslint 9, pnpm 10.13, node 22 환경에서 next.js 15의 eslint 플러그인을 적용했다.

에디터 eslint 플러그인에서 다음 에러를 뱉는다:

Error: Failed to load plugin 'react-hooks' declared in ' » eslint-config-next/core-web-vitals » /Users/doda/workspace/frontend/node_modules/.pnpm/eslint-config-next@15.3.5_eslint@9.31.0_typescript@5.8.3/node_modules/eslint-config-next/index.js': Cannot find module 'eslint-plugin-react-hooks'
Require stack:
- /Users/doda/workspace/frontend/__placeholder__.js

와이라노사우루스 / 출처: https://x.com/bback_it_up/status/1625765380747857921

왜 발생할까?

엄청 자세히 설명해주신 분이 있다. 감사합니다.

pnpm을 사용하는 Next.js 프로젝트에서 eslint-config-next가 죽는 이유와 해결법

Next.js 프로젝트에서 eslint-config-next가 Failed to load plugin 오류를 내뱉는다면

https://witch.work/ko/posts/blog-eslint-pnpm-bugfix

요약하면, pnpm v10부터 public-hoist-pattern 기본 값에서 eslint와 prettier가 제외됨 + eslint config가 flat config를 사용하지 않고 레거시(eslintrc) 방식대로 설정되어 있어서 발생하는 문제다.

해결법

1안) public-hoist-pattern 추가해주기

.npmrc 만들기

다음 내용 추가

public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*

해결 완료!

2안) 비공식 eslint-plugin-nextjs 사용하기

이 문제를 근본적으로 해결하는 PR을 만든 분께서 비공식 포크를 npm에 올려놓았다.

npm: eslint-plugin-nextjs

A fork of @next/eslint-plugin-next that's been upgraded for TypeScript and ESLint V9.. Latest version: 1.0.3, last published: a month ago. Start using eslint-plugin-nextjs in your project by running `npm i eslint-plugin-nextjs`. There are 1 other projects in the npm registry using eslint-plugin-nextjs.

https://www.npmjs.com/package/eslint-plugin-nextjs

공식 eslint-plugin-next 대신 이 라이브러리를 사용하면 해결될 것이다. 근데 나는 1안으로 해결했다.