Conflicts between Node.js types and TypeScript in Quasar SPA - SetInterval issue

Frontend
1

I’m developing a single-page application (SPA) using the Quasar framework with TypeScript. My project has two distinct directories: one for the backend, which uses Express and Node.js, and another for the frontend that employs Quasar CLI along with Vite.

The challenge I’m encountering is that when I work in the frontend directory in VSCode, it imports types from Node.js. This results in the SetInterval function returning NodeJS.Timeout instead of a standard number, which is the expected behavior in a browser context.

I believe this occurs because Quasar’s dependencies may be including @types/node automatically. Below is my current project configuration:

{
  "name": "webapp-frontend",
  "version": "1.0.0",
  "dependencies": {
    "@quasar/extras": "^1.16.4",
    "axios": "^1.2.1",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "pinia": "^2.0.11",
    "quasar": "^2.6.0"
  },
  "devDependencies": {
    "@quasar/app-vite": "^1.3.0",
    "typescript": "^4.5.4",
    "@typescript-eslint/parser": "^5.10.0"
  },
  "scripts": {
    "serve": "quasar dev",
    "compile": "quasar build"
  }
}

I attempted to eliminate @types/node using package overrides, but the issue persists due to local copies in nested dependencies. What is the recommended approach to stop Node.js types from affecting the browser code in this environment?

2

try adding "skipLibCheck": true to your tsconfig compiler options and make sure you dont have "@types/node" in the types array. alternatively you could explicitly type your setInterval like const timer: number = setInterval(...) as any as a quick workaround until you fix the root cause

3

I encountered this exact problem when working with a similar Quasar setup. The issue stems from Quasar’s build tools automatically including Node.js type definitions. You can resolve this by configuring your tsconfig.json to use the DOM library types explicitly. Add "lib": ["ES2020", "DOM", "DOM.Iterable"] to your compiler options and ensure "moduleResolution": "node" is set. Additionally, create a separate tsconfig.json specifically for your frontend directory that excludes Node.js types by setting "types": [] in the compiler options. This forces TypeScript to use browser-native types for functions like setInterval. The key is isolating your frontend TypeScript configuration from any Node.js dependencies that Quasar might be pulling in through its build chain.

4

hmm this sounds frustrating! have you checked your tsconfig.json to see if it’s explicitly including node types? sometimes the types array there can pull in unwanted stuff. also curious - are you using any shared utilities between your backend and frontend folders that might be causing the type bleeding?