Node.js type definitions interfering with browser types in Quasar Vue SPA project

Frontend
1

I’m working on a Vue SPA using the Quasar framework with TypeScript. My project structure has two folders - one for the Express backend and one for the Quasar frontend.

The issue I’m encountering is that VSCode keeps importing Node.js type definitions in my frontend code. This leads to problems because browser APIs like SetInterval are supposed to return a number, but instead, they return NodeJS.Timeout, which is intended for server-side code.

I believe this occurs because Quasar dependencies are automatically pulling in @types/node. Here’s my current configuration:

{
  "name": "my-spa-app",
  "version": "1.0.0",
  "description": "Vue SPA application",
  "productName": "My App",
  "author": "Developer",
  "private": true,
  "scripts": {
    "serve": "quasar dev",
    "compile": "quasar build",
    "check": "eslint --ext .js,.ts,.vue ./src"
  },
  "dependencies": {
    "@quasar/extras": "^1.16.4",
    "axios": "^1.2.1",
    "quasar": "^2.6.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "pinia": "^2.0.11"
  },
  "devDependencies": {
    "@quasar/app-vite": "^1.3.0",
    "typescript": "^4.5.4",
    "eslint": "^8.10.0"
  }
}

I tried fixing this by adding package overrides:

"overrides": {
  "@types/node": "0.0.0"
}

This eliminates the primary Node types, but some nested dependencies still have their own copies. What’s the best way to ensure my frontend only uses browser-compatible types?

2

Try excluding node types in your tsconfig instead of messing with overrides. Add “typeRoots”: [“./node_modules/@types”] and “skipLibCheck”: true, but exclude node specifically. This worked for me when Quasar kept pulling weird server types into my frontend.

3

Nice tsconfig approach! What about using workspaces? Separating frontend and backend into different workspaces might isolate those type definitions better. Can your project structure handle that?

4

I hit this exact same issue with Quasar and fixed it by tweaking the lib and types settings in my tsconfig.json. You need to tell TypeScript which type libraries to use for your frontend code.

Here’s what I added to my Quasar frontend’s tsconfig.json:

{
  "compilerOptions": {
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "types": ["quasar", "vue"],
    "skipLibCheck": true,
    "moduleResolution": "node"
  },
  "exclude": ["node_modules"]
}

The lib array makes TypeScript use browser DOM types instead of Node.js types. The types array limits which type packages get automatically included. This works better than package overrides since it handles things at the TypeScript compilation level rather than messing with the dependency tree.