Module Resolution Issue: Cannot find module 'react' or its corresponding type declarations.ts in pnpm + turbo

[angushhz]

Summary

Workspace Structure

repo.wefin.ai/
├── apps/
│ └── gui/
│ └── wefin-extension/ # WXT-based Chrome extension
│ ├── package.json
│ └── pages/
│ └── home.tsx # Uses react
├── packages/
│ └── gui/
│ └── wefin/ # Shared UI component library
│ └── package.json
├── pnpm-workspace.yaml
├── .npmrc # shamefully-hoist=true
└── turbo.json

Problem Description

When i setup monorepo with pnpm + turbo . Ts-check always show cannot resolve the import {useState} from react module when imported although i have installed.

The web app starts normally. However, I feel a bit annoyed because TypeScript check errors keep showing up in the code editor. I think this might be caused by pnpm hoisting. Is there any way to prevent these red errors from appearing?

Additional information

No response

Example

No response

[sunnypatell]

this is a classic pnpm strict mode + typescript resolution mismatch. the app probably runs fine because the bundler (wxt/vite) has its own module resolution, but the editor's typescript language server follows node's module resolution strictly and can't find the types through pnpm's symlink structure.

the root cause

pnpm's strict node_modules only lets a package access dependencies it explicitly declares in its own package.json. if react and @types/react are only in the root package.json (or another workspace package), typescript in the editor won't find them when resolving from your extension's directory.

even with shamefully-hoist=true, there can be edge cases where the type declarations don't land where typescript expects them.

fix 1: declare react where it's used (recommended)

add react and @types/react directly to your extension's package.json:

{
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.1"
  }
}

then run pnpm install from the repo root. this is the approach both turborepo and pnpm recommend.

fix 2: configure tsconfig properly

in your extension's tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "typeRoots": [
      "./node_modules/@types",
      "../../node_modules/@types"
    ],
    "preserveSymlinks": false
  }
}

key points:

• typeRoots tells typescript where to look for @types/* packages. adding the root path lets it find hoisted types.
• preserveSymlinks: false is critical for pnpm. if this is true anywhere in your tsconfig chain, typescript can't resolve types through pnpm's symlinks. pnpm docs explicitly warn against this.
• moduleResolution: "bundler" aligns typescript's resolution with what vite/wxt actually does at runtime.

fix 3: ensure @types are publicly hoisted

in .npmrc:

public-hoist-pattern[]=*types*
public-hoist-pattern[]=*eslint*

this hoists @types/* packages to the root node_modules/ where typescript can always find them. this is the default, but if your .npmrc overrides the defaults, these entries may be missing.

after changing .npmrc:

rm -rf node_modules apps/gui/wefin-extension/node_modules
pnpm install

most likely fix for your case

since you already have shamefully-hoist=true, the issue is probably one of:

1. react / @types/react aren't declared in the extension's package.json (fix 1)
2. tsconfig.json is missing typeRoots pointing to root node_modules/@types (fix 2)
3. preserveSymlinks is accidentally true somewhere in the tsconfig chain (fix 2)

fix 1 + fix 2 together should solve it.

links

• turborepo - managing dependencies
• turborepo - typescript guide
• pnpm - typescript
• pnpm - .npmrc settings