Pesquisa de site

reactjs - monorepo com yarn workspaces usando vite, react, tailwind - VS Code não consegue resolver pacotes

Eu criei um monorepo usando os workspaces do yarn@3.

Meu package.json raiz:

{
  "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"
  }
}

O package.json em 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"
  }
}

Eu criei um componente dentro da minha pasta apps/ui/src e, quando eu executo yarn workspace ui run dev, o aplicativo pode ser iniciado no navegador.

No entanto, ao abrir meu monorepo no VS Code, ele não consegue resolver pacotes npm em declarações import:

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

O mesmo acontece com o vite.config.ts em 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'

Ao abrir o monorepo no WebStorm, tudo está ok.

O repositório de reprodução pode ser encontrado aqui.

Atualização: Parece que está relacionado ao mecanismo PnP. Eu encontrei esta pergunta e configurar nodeLinker: node-modules no .yarnrc.yml seguido de yarn install resolveu o problema.

No entanto, as respostas para esta pergunta não funcionaram para mim.

Recebo este erro no VS Code após executar 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.

Os arquivos em .yarn/sdks/typescript/lib na verdade não existem, mas eu tenho um arquivo integrations.yml em .yarn/sdks:

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

integrations:
  - vscode

Resposta #1

Parece que as peças que faltam se devem à configuração PnP:

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

Adicione um tsconfig.json minimal:

{
  "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
  }
}

Em seguida, instale esta extensão do VS Code e siga estes passos:

  • Pressione ctrl+shift+p em um arquivo TypeScript
  • Escolha "Selecionar versão do TypeScript"
  • Escolha "Usar versão do espaço de trabalho"

Mais detalhes podem ser encontrados na documentação.