yarn workspaces monorepo with vite, react, tailwind - VS Code fails to resolve packages

Question

I have created a monorepo using yarn@3 workspaces.

My root 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"
  }
}

The package.json in 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"
  }
}

I have created a component inside my apps/ui/src folder and when I run yarn workspace ui run dev, the app can be started in the browser.

However, when opening my monorepo in VS Code, it fails to resolve npm packages in import statements:

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

The same happens for the vite.config.ts in 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'

When opening the monorepo in WebStorm, everything is ok.

The repro repository can be found here.

Update: It looks like it is related to the PnP mechanism. I came across this question and setting nodeLinker: node-modules in .yarnrc.yml followed by yarn install fixed it.

However, the ansers for this question didn't work for me.

I get this error in VS Code after running 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.

The files in .yarn/sdks/typescript/lib actually don't exist but I have a file integrations.yml in .yarn/sdks:

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

integrations:
  - vscode

Alexander Zeitler · Answer 1 · 2022-01-03T23:59:01.173

Looks like the missing pieces have been due to the PnP configuration:

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

Add a minimal 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
  }
}

Then install this VS Code extension followed by these steps:

Press ctrl+shift+p in a TypeScript file
Choose "Select TypeScript Version"
Pick "Use Workspace Version"

More details can be found in the docs.

yarn workspaces monorepo with vite, react, tailwind - VS Code fails to resolve packages

1 Answers1