"import not found" for custom types in Vue 3 (with Vite/Vitesse)

Question

I've got a Vue 3 project running Vitesse (a Vite starter). I've added a custom ProductData type to my src/types.ts, but when I try to use it in one of my pages the page fails to load and I get a few console errors all saying SyntaxError: import not found: ProductData. The path for the import is definitely correct, the type is exported, and I've tried importing from ts files in different locations as well but see the same thing.

Interestingly I do not have any issues importing these types from my store files, just from *.vue files. Any ideas? This post mentions adding some things to shims.d.ts and tsconfig.json, but they didn't make a difference.

EDIT: Forgot to include my tsconfig.json. This is with include from @flydev:

// Some items added from https://stackoverflow.com/questions/63724523/how-to-add-typescript-to-vue-3-and-vite-project
{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "ESNext",
    "target": "ESNext",
    "lib": [
      "DOM",
      "ESNext"
    ],
    "useDefineForClassFields": true,
    "strict": true,
    "esModuleInterop": true,
    "incremental": false,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "importHelpers": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "noEmit": true,
    "types": [
      "vite/client",
      "vite-plugin-pages/client",
      "vite-plugin-vue-layouts/client"
    ],
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.vue"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ]
}

EDIT 2: Just moved over to chrome instead of firefox, and when I check out types.ts in sources, the file is empty. The error is actually different as well and maybe more helpful: SyntaxError: The requested module '/src/types.ts' does not provide an export named 'JsonResponse'.

Answer 1

I came across this comment in an issue in vitejs/vite:

There is a know issue in Vue with type imports, it should work if you use the import type form: import type { User } from '~/types'

Changing my import from

import { ProductData } from '~/types'

to

import type { ProductData } from '~/types'

seems to fix the problem. Once I fixed my import, I saw the same thing happening with a third-party type, and updating the import fixed that one as well.