1

我使用yarn@3工作区创建了一个 monorepo。

我的根package.json：

{
  "name": "hello-yarn-workspaces",
  "packageManager": "yarn@3.1.1",
  "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": "yarn@3.1.1",
  "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 中打开我的 monorepo 时，它无法解析import语句中的 npm 包：

// 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 中打开 monorepo 时，一切正常。

可以在此处找到 repro 存储库。

更新：看起来它与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
4

1 回答 1

0

看起来丢失的部分是由于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 版本”
  • 选择“使用工作区版本”

更多细节可以在docs中找到。

于 2022-01-03T23:44:31.773 回答