reactjs - yarn 워크스페이스 모노레포와 vite, react, tailwind - VS Code가 패키지를 해결하지 못함

나는 yarn@3 워크스페이스를 사용하여 모노레포를 생성했습니다.

내 루트 package.json:

{
  "name": "hello-yarn-workspaces",
  "packageManager": "[email ",
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "devDependencies": {
    "@commitlint/cli": "^16.0.1",
    "@commitlint/config-conventional": "^16.0.0",
    "husky": "^7.0.4"
  },
  "scripts": {
    "postinstall": "husky install",
    "prepublishOnly": "pinst --disable",
    "postpublish": "pinst --enable"
  }
}

apps/ui의 package.json:

{
  "name": "ui",
  "packageManager": "[email ",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.4.0",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "@vitejs/plugin-react": "^1.1.3",
    "autoprefixer": "latest",
    "postcss": "latest",
    "tailwindcss": "latest",
    "typescript": "^4.5.4",
    "vite": "^2.7.10"
  }
}

저는 apps/ui/src 폴더 안에 컴포넌트를 만들었고, yarn workspace ui run dev를 실행하면 앱을 브라우저에서 시작할 수 있습니다.

하지만 VS Code에서 제 모노레포를 열 때, import 문에서 npm 패키지를 해결하지 못합니다:

// Cannot find module 'react' or its corresponding type declarations.ts(2307)
import React, { ReactElement, useState } from 'react'

apps/ui의 vite.config.ts에서도 동일하게 발생합니다

// Cannot find module 'vite' or its corresponding type declarations.ts(2307)
import { defineConfig } from 'vite'
// Cannot find module '@vitejs/plugin-react' or its corresponding type declarations.ts(2307)
import react from '@vitejs/plugin-react'

WebStorm에서 모노레포를 열 때, 모든 것이 괜찮습니다.

재현 저장소는 여기에서 찾을 수 있습니다.

업데이트: 이것은 PnP 메커니즘과 관련이 있는 것 같습니다. 이 질문을 발견했고 .yarnrc.yml에서 nodeLinker: node-modules를 설정한 후 yarn install을 실행하니 문제가 해결되었습니다.

그러나 이 질문에 대한 답은 저에게 효과가 없었습니다.

다음 명령어 yarn dlx @yarnpkg/sdks vscode를 실행한 후 VS Code에서 이 오류가 발생합니다:

The path /Users/alexzeitler/src/hello-yarn-workspaces/.yarn/sdks/typescript/lib/tsserver.js doesn't point to a valid tsserver install. Falling back to bundled TypeScript version.

.yarn/sdks/typescript/lib의 파일들은 실제로 존재하지 않지만, .yarn/sdks에는 integrations.yml 파일이 있습니다:

This file is automatically generated by @yarnpkg/sdks.
Manual changes might be lost!

integrations:
  - vscode

답변 #1

분실된 부품들은 PnP 구성 때문에 생긴 것처럼 보입니다:

yarn add --dev typescript ts-node prettier
yarn dlx @yarnpkg/sdks vscode

최소한의 tsconfig.json을 추가하세요:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",
    "module": "commonjs",
    "lib": ["ESNext"],

    /* Strict Type-Checking Options */
    "strict": true,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "esModuleInterop": true,

    /* Advanced Options */
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  }
}

그런 다음 이 VS Code 확장 프로그램을 설치하고 다음 단계들을 진행하세요:

• TypeScript 파일에서 ctrl+shift+p를 누르세요
• ‘TypeScript 버전 선택’을 선택하세요
• "작업 공간 버전 사용"을 선택

자세한 내용은 문서에서 확인할 수 있습니다.