[SOLVED] Module '"vue"' has no exported member 'computed'

Module '"vue"' has no exported member 'computed'

<script setup lang="ts">
import { IonItem, IonCheckbox, IonItemSliding, IonItemOptions, IonItemOption, IonIcon } from "@ionic/vue";
import { ref, computed } from "vue";
import dayjs from "dayjs";
import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { calendarOutline, flameOutline, closeCircleOutline } from 'ionicons/icons';

Vue version "vue": "^3.4.35". Source: package.json file

tsconfig file:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

package.json file:

{
  "name": "habit-rabit",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "test:e2e": "cypress run",
    "test:unit": "vitest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@capacitor/android": "6.1.1",
    "@capacitor/app": "^6.0.0",
    "@capacitor/camera": "^6.0.0",
    "@capacitor/core": "^6.0.0",
    "@capacitor/filesystem": "^6.0.0",
    "@capacitor/haptics": "^6.0.0",
    "@capacitor/ios": "6.1.1",
    "@capacitor/keyboard": "^6.0.0",
    "@capacitor/preferences": "^6.0.0",
    "@capacitor/share": "^6.0.0",
    "@capacitor/status-bar": "^6.0.0",
    "@ionic/pwa-elements": "^3.2.2",
    "@ionic/vue": "^8.2.0",
    "@ionic/vue-router": "^8.2.0",
    "capacitor-ios-autofill-save-password": "^3.0.0",
    "dayjs": "^1.11.10",
    "firebase": "^10.8.1",
    "ionicons": "^7.0.0",
    "vue": "^3.4.35",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@capacitor/cli": "^6.0.0",
    "@types/vue": "^1.0.31",
    "@vitejs/plugin-legacy": "^5.0.0",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/test-utils": "^2.3.0",
    "cypress": "^13.5.0",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.27.0",
    "jsdom": "^24.1.0",
    "terser": "^5.4.0",
    "typescript": "^5.1.6",
    "vite": "^5.0.0",
    "vitest": "^2.0.2",
    "vue-tsc": "^2.0.26"
  },
  "description": "An Ionic project"
}

When running Ionic build command I am experiencing this error below. Please also see comments under the post. Basically the build does not proceed due to this error. Last week my IDE was highlighting this same error but the build was successful anyway.

Module '"vue"' has no exported member 'computed'.ts-plugin(2305)
import computed

Solution

The error is caused by vue-tsc command that is responsible for typechecking in the project.

The problem is @types/vue dependency, it should be removed. It's intended for Vue 1.x and prevents the built-in types from vue package by being recognized by TypeScript.