yarn berry와 nextjs 프로젝트 생성시 에러 해결모음...

yarn으로 nextjs프로젝트를 생성하는데 node_modules폴더가 안생기고 에러가 났다.
내가 쓰는 yarn 버전이 강의버전(yarn 1)과 달라서 에러가 나는것을 알게됐다.

토스팀의 아티클을 읽고 yarn berry를 사용해보기로 했다..

에러 봉착x999의 시작

let's go

0. yarn berry?

• Plug'n'Play (PnP):
  • node_modules 폴더 대신 .pnp.cjs 또는 .pnp.js 파일을 사용합니다.
  • 패키지의 의존성 트리를 PnP 설정 파일에 저장하여 빠른 패키지 해석과 의존성 관리를 가능하게 합니다.
• Zero-Install:
  • .yarn/cache 폴더에 패키지를 캐시하여, 프로젝트를 클론하고 yarn install을 실행하지 않아도 모든 의존성이 사용 가능합니다.
  • .yarn/cache와 .pnp.cjs 파일을 버전 관리 시스템에 포함시키면 됩니다.
• Constraints:
  • constraints.pro 파일을 사용하여 의존성 버전이나 패키지 구조에 대한 제약 조건을 설정할 수 있습니다.
• Plug'n'Play Compatibility:
  • PnP로 인한 호환성 문제를 해결하기 위해 .yarnrc.yml 파일에서 다양한 설정을 조정할 수 있습니다.

1. yarn create next-app후 yarn dev 안됨문제

두가지 문제가 있었다.
경로에 한글이 있었고, corepack 사용 등 초기 설정을 해주지 않았다.
(다른문제가 있었을 수 있음. 근데 이 두가지로 해결함)

에러1

node:internal/process/esm_loader:40 internalBinding('errors').triggerUncaughtException( ^ Error: Qualified path resolution failed: we looked for the following paths, but none could be accessed.

corepack enable 
yarn set version stable
yarn install
yarn dev

https://5kdk.github.io/blog/2024/04/23/yarn-v4-nextjs-issues
그런데도 에러가 났었음

에러2

node:internal/modules/cjs/loader:1144 const err = new Error(message); ^ Error: Cannot find module '../server/require-hook' Require stack: - E:\[한글이름]\yarn-berry-test\.yarn\__virtual__\next-virtual-11

경로를 영문과 숫자로만 구성된 간단한 경로로 변경해본다.

잘되네!

2. git clone후 yarn dev 안됨문제

TypeError: Cannot convert undefined or null to object

git clone 후

yarn install
yarn dev

하는게 아니라

(관리자권한으로 열어서)

corepack enable
yarn set version stable
yarn install
yarn dev

해야함

3. yarn berry prettier 안먹힘 문제(빨간줄)

prettier 설치 및 설정방법

일단 설치와 설정방법 알아보자.

eslint와 prettier는
둘다 포매팅을 해서 충돌이 일어날 수 있음
-> 예방 설정 해야됨.

yarn add --dev --exact prettier 프로젝트에 prettier 설치

.prettierrc 설정파일 생성

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true
}

저장시 포매팅 작동 하게 설정하기
settings.json(User)

    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": true,
      "source.organizeImports": true
    }

yarn add --dev eslint-config-prettier eslint-config-prettier설치

.eslintrc.json

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

ESLint 잘되는지 확인하려면
Ctrl + Shift + P -> ESLint: Restart ESLint Server
후 OUTPUT 탭에서 동작 확인

yarn berry에서 prettier 사용하기 세팅

index.tsx같은걸 열어서 보면 코드가 온통 빨간색에다
prettier 모듈을 찾지 못한다는 에러가 뜸..

yarn add -D prettier prettier-plugin-tailwindcss  
yarn dlx @yarnpkg/sdks vscode

.prettierrc

{
    "singleQuote": true,
    "useTabs": false,
    "trailingComma": "all",
    "semi": true,
    "printWidth": 80,
    "tabWidth": 2,
    "plugins": ["prettier-plugin-tailwindcss"]
}

그래도 빨간줄이 나온다면,
모듈을 못찾는거임 👉 4번으로

빨간줄 관련글
eslint 빨간줄, 재시작

yarn berry에서 prettier 관련글
yarn berry prettier

4. module not found

타입스크립트 버전을 VSCode버전이 아닌 Workspace버전을 사용한다.

yarn dlx @yarnpkg/sdks vscode (위에서 했다면 안해도됨)

터미널에서 code .후 (Reload window 와 비슷)

select typescript version
Use Workspace Version

하니까 빨간줄 없어짐~~!!!!!