VSCode TS2307 Cannot find module

Question

Opening a Typescript project in VSCode causes error "ts2307 Cannot find module 'react' or its corresponding type declarations". But Webstorm works fine. I created the repo from CRA, the typescript template. Node installed via nvm. I'm using yarn 3.2.3 here and I have not ejected the CRA.

package.json

{
  "name": "frontend-ts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

yarn3 new version, need extra config for vscode which fix this editor issue please ref below three link:

• https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions
• https://yarnpkg.com/getting-started/editor-sdks#vscode
• https://classic.yarnpkg.com/lang/en/docs/workspaces/

==fix step=================

1. create yarn workspace
2. yarn (in workspace)
3. yarn dlx @yarnpkg/sdks vscode
4. vscode select workspace typescript //https://yarnpkg.com/getting-started/editor-sdks#vscode
5. vscode will advise use install zipfs extension, insall it(maybe use can install zipfs by your self)