reactjs - Yarn Workspaces מונורפו עם 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"
  }
}

ה־package.json בתיקייה apps/ui:

{
  "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, הוא נכשל בפתרון חבילות npm בפקודות import:

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

אותו הדבר קורה עבור vite.config.ts ב-apps/ui

// 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. נתקלתי בשאלה הזו והגדרת nodeLinker: node-modules ב-.yarnrc.yml ואחריה הפעלת yarn install פתרו את הבעיה.

עם זאת, התשובות לשאלה זו לא עבדו עבורי.

אני מקבל את השגיאה הזו ב-VS Code לאחר שהרצתי yarn dlx @yarnpkg/sdks vscode:

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 למעשה לא קיימים אבל יש לי קובץ integrations.yml ב-.yarn/sdks:

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 ולאחריו בצע את הצעדים הבאים:

• לחץ על ctrl+shift+p בקובץ TypeScript
• בחר "בחר גרסת TypeScript"
• בחר "השתמש בגרסת סביבת העבודה"

ניתן למצוא פרטים נוספים במסמכים.