[Bug?]: Typescript project throws an error when moving towards nodeLinker: pnp

[karthickshanmugam0689]

Self-service

• I'd be willing to implement a fix

Describe the bug

I tried to migrate the enterprise repo from node_modules to pnp via nodeLinker.
With this setup, I have no issues with file extensions .jsx. But when I have the files with .tsx, I face issues with typescript, which says

Cannot find module '{any package installed via dependencies in root package.json which has types}' or its corresponding type declarations.

For example, for react we have @types/react and it fails to identify react. But this problem is only with .tsx files. When we have the same code with .jsx, there is no issue at all.
Also if I install the dependencies at the package level, this also works. So the only thing which is not working is the dependencies at the root level.
Previously with yarn classic or yarn berry with nodeLinker: node_modules, we had typeRoots option in tsconfig.json which has the value ./node_modules/@types. But with yarn pnp, we dont have node_modules. So I guess this is causing the issue here
Anyway the other dependenices within monorepo works fine without any issues
P.S: I tried to indicate vscode to read the deps from zip file as explained here => https://yarnpkg.com/migration/pnp#editor-support
Any advice on the steps that I can take to figure out why types definiton is not working here?

To reproduce

main setting in package.json

"workspaces": [
    "apps/*",
    "libraries/*/*"
  ],
  "dependencies": {
    "react": "^18.3.1",
},
"devDependencies": {
   "@types/react": "^18.2.79"
}

.yarnrc.yml

tsEnableAutoTypes: true
nodeLinker: pnp
pnpMode: loose // just added to make sure that this has no issue. But even then typescript references cannot be resolved

tsconfig.base.json

{
    "compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
        "jsx": "react-jsx", // Controls how JSX constructs are emitted in JavaScript files.
        "lib": ["DOM", "DOM.Iterable", "ESNext"], // Type checking for latest ECMAScript features, DOM, and iterable DOM collections.
        "target": "ES2017",
        "allowSyntheticDefaultImports": true, // Allows importing from modules without default exports.
        "composite": true, // Enables project references for structured TypeScript projects.
        "declaration": true, // Generates .d.ts type declaration files.
        "declarationMap": false, // Generates source maps for .d.ts files.
        "downlevelIteration": true, // Provides iterator compatibility for older JavaScript targets.
        "emitDecoratorMetadata": true, // Required for experimental decorator support.
        "esModuleInterop": true, // Improves compatibility with CommonJS modules.
        "experimentalDecorators": true, // Enables experimental decorator features.
        "forceConsistentCasingInFileNames": true, // Enforces consistent file name casing.
        "incremental": true, // Enables incremental compilation for faster builds.
        "noEmit": true, // Disables emitting compiled JavaScript files.
        "noFallthroughCasesInSwitch": true, // Warns about fallthrough cases in switch statements.
        "noImplicitAny": true, // Prevents using 'any' type without explicit declaration.
        // "noImplicitOverride": true, // Enforces explicit 'override' keyword on method overwrites.
        "noImplicitReturns": true, // Enforces explicit returns in all function code paths.
        "noImplicitThis": true, // Prevents 'this' from being implicitly typed as 'any'.
        "noLib": false, // Includes TypeScript's standard declaration files.
        "noUnusedLocals": false, // Controls warnings about unused local variables.
        "removeComments": false, // Preserves comments in the compiled JavaScript.
        "skipLibCheck": true, // Skips type checks on standard TypeScript declaration files.
        "sourceMap": false, // Generates source maps for debugging.
        "strict": true, // Enables all strict type-checking options.
        "strictBindCallApply": true, // Enforces strict 'bind', 'call', and 'apply'.
        "strictFunctionTypes": true, // Enforces strict function type checking.
        "strictNullChecks": true, // Enforces strict null and undefined checks.
        "strictPropertyInitialization": true, // Enforces property initialization in classes.
        "useUnknownInCatchVariables": false // Prevents changing catch variable type from 'any' to 'unknown'.
    }
}

vscode settings.json

{
  "cSpell.language": "en-US",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "modifications",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.associations": {
    "apple-app-site-association": "json",
    ".env": "dotenv"
  },
  "files.exclude": {
    "**/.DS_Store": true,
    "**/.git": true,
    "**/.hg": true,
    "**/.svn": true,
    "**/*.js": {
      "when": "$(basename).ts"
    },
    "**/*.tsbuildinfo": true,
    "**/build": true,
    "**/CVS": true,
    "**/dist": true,
    "**/lib": true,
    "**/node_modules": true
  },
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "search.exclude": {
    "**/.yarn": true,
    "**/.pnp.*": true
  },
  "eslint.nodePath": ".yarn/sdks",
  "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "npm.packageManager": "yarn"
}

Environment

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 20.9.0 - /private/var/folders/cn/fqzzvl0x3xbbxj4f5h9y89xm0000gq/T/xfs-4a910746/node
    Yarn: 4.4.1 - /private/var/folders/cn/fqzzvl0x3xbbxj4f5h9y89xm0000gq/T/xfs-4a910746/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm

Additional context

No response

[clemyan]

The information you provided is not nearly enough to reproduce the issue (for one it doesn't even include a typescript dependency). We use React with TypeScript and PnP is this repo ourselves so as it stands we unfortunately cannot say anything more than "it works for us".

Please provide a runnable reproduction so we can take a look. Otherwise you can try debugging it by setting PNP_DEBUG=1 or by using TypeScript's traceResolutions.

[yarnbot]

Hi! 👋

It seems like this issue as been marked as probably resolved, or missing important information blocking its progression. As a result, it'll be closed in a few days unless a maintainer explicitly vouches for it.

[yarnbot]

Hi! 👋

It seems like this issue as been marked as probably resolved, or missing important information blocking its progression. As a result, it'll be closed in a few days unless a maintainer explicitly vouches for it.