CODEWITHSUNDEEP
reactjstypescriptvitebundler
Rachel
Rachel

Reputation: 37

VSCode JS/TS Language Service Crashes with TypeScript 5 and Vite Project

I'm having an issue with VSCode where the JS/TS language service crashes repeatedly after setting up a new Vite project with React, TypeScript, and SWC. Here's what I did:

Created a new Vite project using yarn create vite my-app with the following options:

Framework: React
Variant: TypeScript + SWC

Set up ESLint and Prettier.

After restarting VSCode, I get the error: The JS/TS language service immediately crashed 5 times. The service will not be restarted. enter image description here

I read that it could be a VSCode version issue, so I checked and my VSCode version is 1.89.1 (latest). When I downgraded TypeScript to a 4.x version, IntelliSense seemed to work correctly. However, I would prefer to use TypeScript 5.x because it allows setting moduleResolution to bundler.

My setup:

package.json

{
  "name": "vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^18.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.1.5",
    "vite": "^5.2.0"
  },
  "packageManager": "[email protected]"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "vite.config.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

.eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'prettier'
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname
  },
  plugins: [
    'react-refresh',
    '@typescript-eslint',
    'import',
    'jsx-a11y',
    'react',
    'react-hooks'
  ],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true }
    ],
    'react/react-in-jsx-scope': 'off',
    'react/function-component-definition': 'off',
    'arrow-body-style': 'off',
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never'
      }
    ]
  }
};

Upvotes: 1

Views: 2361

Answers (1)

nathan
nathan

Reputation: 9395

There are quite a few issues on vscode's GH, which point to https://github.com/yarnpkg/berry/issues/6270 being the cause.

Proposed solution is to set TS to version < 5.4.4 ("typescript": "5.4.3")

Upvotes: 1

Related Questions