typescriptyarnpkgtsxyarnpkg-v2

tsx cannot find module 'xxx'

I am using yarn v2 to install the dependency package, and using yarn start command to start the project smoothly, but vscode always reminds me that I can't find any local modules.

enter image description here

And here is my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Here is my folder structure:

enter image description here

Solution

  • You can use @yarnpkg/sdks package (which is a part of Yarn 2+)

    You can enable PnP support in VS Code via:
    yarn dlx @yarnpkg/sdks vscode
    This will generate tssdk and modifies your .vscode/settings.json to add TypeScript compiler-wrapper inside tssdk as a Workspace TypeScript compiler. You should run VS Code, open any TypeScript file and in the bottom right side of the window click on TypeScript version. Select Use Workspace Version from dropdown menu to actually use Workspace Compiler, its version has the suffix -sdk.

    You can also read Yarn 2+ docs regarding VSCode integration here:
    https://yarnpkg.com/getting-started/editor-sdks#vscode