vite-plugin-vue icon indicating copy to clipboard operation
vite-plugin-vue copied to clipboard

`import { type A } from './types'` triggers error during build

Open Deckluhm opened this issue 1 year ago • 2 comments

Related plugins

Describe the bug

I recently upgraded an app I'm working on:

  • vite from 5.3.3 to 6.0.7
  • @vitejs/plugin-vue from 5.0.5 to 5.2.1

And the following code:

import { type A } from './types'

raised an error during build (the build-only phase, not the type-check one):

❯ npm run build

> [email protected] build
> vue-tsc -b && vite build

vite v6.0.9 building for production...
✓ 17 modules transformed.
x Build failed in 1.16s
error during build:
Could not resolve "./types" from "src/App.vue?vue&type=script&setup=true&lang.ts"
file: /home/projects/vitejs-vite-xaslukcp/src/App.vue?vue&type=script&setup=true&lang.ts
    at getRollupError (file:///home/projects/vitejs-vite-xaslukcp/node_modules/rollup/dist/es/shared/parseAst.js:558:41)
    at error (file:///home/projects/vitejs-vite-xaslukcp/node_modules/rollup/dist/es/shared/parseAst.js:554:42)
    at handleInvalidResolvedId (file:///home/projects/vitejs-vite-xaslukcp/node_modules/rollup/dist/es/shared/node-entry.js:20239:37)
    at getResolveStaticDependencyPromises/< (file:///home/projects/vitejs-vite-xaslukcp/node_modules/rollup/dist/es/shared/node-entry.js:20199:26)

Reproduction

https://stackblitz.com/edit/vitejs-vite-xaslukcp

Steps to reproduce

  1. Open reproduction
  2. Run npm run build in terminal

You can then change the import on line 3 of src/App.vue:

- import { type ID } from './types';
+ import type { ID } from './types';

and run npm run build again to make it work.

According to https://www.typescriptlang.org/docs/handbook/2/modules.html#import-type, both syntaxes are valid.

Also I don't know if it helps but the following Vanilla Vite project doesn't have the issue so I guess that's a problem with the Vue plugin.

System Info

System:
  OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13600KF
  Memory: 14.53 GB / 15.53 GB
  Container: Yes
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 23.6.0 - ~/.nvm/versions/node/v23.6.0/bin/node
  npm: 10.9.2 - ~/.nvm/versions/node/v23.6.0/bin/npm
  bun: 1.1.45 - ~/.bun/bin/bun

Used Package Manager

npm (in reproduction), bun (locally)

Validations

Deckluhm avatar Jan 20 '25 19:01 Deckluhm

The error in build is the expected behavior. This is because import { type ID } from './types' means that named import can be removed when transformed (transformed to import './types'). On the other hand, import type { ID } from './types' means the import statement itself can be removed (transformed to empty line).

The reason why the error doesn't happen in dev seems to be related to https://github.com/dominikg/tsconfck/issues/195.

sapphi-red avatar Apr 26 '25 16:04 sapphi-red

I'm having this issue since moving to Nuxt 4. Strangely enough it works fine in my local environment, but messes up in a Docker environment... Even with import type { blabla } it still messes up.

This is the error I get:

10.19 [nuxi]  ERROR  Nuxt Build Error: [vite:vue] [@vue/compiler-sfc] Failed to resolve import source "~/plugins/quasar-component-extensions".
10.19
10.19 /app/app/components/estate/specifications/fields/Select.vue
10.19 2  |  import type { HSelectProps } from '~/plugins/quasar-component-extensions'
10.19 3  |
10.19 4  |  type Props = { debounce?: number } & HSelectProps
10.19    |                                       ^^^^^^^^^^^^
10.19 5  |  const props = withDefaults(defineProps<Props>(), {
10.19 6  |      // debounce: 1000,
10.19 file: /app/app/components/estate/specifications/fields/Select.vue

Tenrys avatar Jul 22 '25 08:07 Tenrys