Unresolvable type: TSConditionalType Vue 3.3

[productdevbook]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

Reproduction

https://github.com/productdevbook/vue-ts-bug

Steps to reproduce

pnpm i
pnpm dev

brach: master vue 3.2 dont problem

brach: vue-beta vue 3.3 problem

System Info

System:
    OS: Linux 6.2 Ubuntu 23.04 23.04 (Lunar Lobster)
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400 @ 2.60GHz
    Memory: 16.86 GB / 31.10 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^4.2.1 => 4.2.1 
    vite: ^4.3.2 => 4.3.2

Used Package Manager

pnpm

Logs

Click to expand!

 pnpm vite build --debug
  vite:config bundled config file loaded in 19.15ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'vue' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     external: [],
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   configFile: '/home/productdevbook/cop/vue-ts-bug/vite.config.ts',
  vite:config   configFileDependencies: [ '/home/productdevbook/cop/vue-ts-bug/vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/home/productdevbook/cop/vue-ts-bug',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/home/productdevbook/cop/vue-ts-bug/public',
  vite:config   cacheDir: '/home/productdevbook/cop/vue-ts-bug/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: true,
  vite:config   esbuild: { jsxDev: false },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules],
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/home/productdevbook/cop/vue-ts-bug',
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(1) {
  vite:config     'fnpd_/home/productdevbook/cop/vue-ts-bug' => {
  vite:config       dir: '/home/productdevbook/cop/vue-ts-bug',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:build-metadata',
  vite:config       'vite:watch-package-data',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:build-html',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:force-systemjs-wrap-complete',
  vite:config       'commonjs',
  vite:config       'vite:data-uri',
  vite:config       'vite:worker-post',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:build-import-analysis',
  vite:config       'vite:esbuild-transpile',
  vite:config       'vite:terser',
  vite:config       'vite:load-fallback'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +6ms
vite v4.3.2 building for production...
  vite:esbuild 172.39ms tsconfck init /home/productdevbook/cop/vue-ts-bug +0ms
✓ 4 modules transformed.
✓ built in 251ms
[vite:vue] [@vue/compiler-sfc] Unresolvable type: TSConditionalType

/home/productdevbook/cop/vue-ts-bug/src/primitive.ts
47 |   ComponentType<P>
48 |  
49 |  type PropsWithoutRef<P> = P extends object ? {
   |                            ^^^^^^^^^^^^^^^^^^^^
50 |    [K in keyof P as K extends 'ref' ? never : K]: P[K]
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
51 |  } : P
   |  ^^^^^
file: /home/productdevbook/cop/vue-ts-bug/src/App.vue
error during build:
Error: [@vue/compiler-sfc] Unresolvable type: TSConditionalType

/home/productdevbook/cop/vue-ts-bug/src/primitive.ts
47 |   ComponentType<P>
48 |  
49 |  type PropsWithoutRef<P> = P extends object ? {
   |                            ^^^^^^^^^^^^^^^^^^^^
50 |    [K in keyof P as K extends 'ref' ? never : K]: P[K]
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
51 |  } : P
   |  ^^^^^
    at ScriptCompileContext.error (/home/productdevbook/cop/vue-ts-bug/node_modules/.pnpm/@vue+compiler-sfc@3.3.0-beta.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15839:11)
    at innerResolveTypeElements (/home/productdevbook/cop/vue-ts-bug/node_modules/.pnpm/@vue+compiler-sfc@3.3.0-beta.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17996:14)
    at resolveTypeElements (/home/productdevbook/cop/vue-ts-bug/node_modules/.pnpm/@vue+compiler-sfc@3.3.0-beta.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17900:35)
    at innerResolveTypeElements (/home/productdevbook/cop/vue-ts-bug/node_modules/.pnpm/@vue+compiler-sfc@3.3.0-beta.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17945:16)
    at resolveTypeElements (/home/productdevbook/cop/vue-ts-bug/node_modules/.pnpm/@vue+compiler-sfc@3.3.0-beta.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17900:35)
    at innerResolveTypeElements (/home/productdevbook/cop/vue-ts-bug/node_modules/.pnpm/@vue+compiler-sfc@3.3.0-beta.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17945:16)
    at resolveTypeElements (/home/productdevbook/cop/vue-ts-bug/node_modules/.pnpm/@vue+compiler-sfc@3.3.0-beta.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17900:35)
    at innerResolveTypeElements (/home/productdevbook/cop/vue-ts-bug/node_modules/.pnpm/@vue+compiler-sfc@3.3.0-beta.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17945:16)
    at resolveTypeElements (/home/productdevbook/cop/vue-ts-bug/node_modules/.pnpm/@vue+compiler-sfc@3.3.0-beta.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17900:35)
    at resolveInterfaceMembers (/home/productdevbook/cop/vue-ts-bug/node_modules/.pnpm/@vue+compiler-sfc@3.3.0-beta.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18068:25)
    

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[yyx990803]

As the error message indicates: Vue's compiler cannot resolve conditional types. This is likely a wontfix.

Unfortunately, type to runtime props analyzation is performed at the AST level, not using TS itself, and there are limitations on the type complexity that can be supported. The kind of complex types in your repro simply isn't feasible.

While it may place some constraints on how you structure your code, your best bet is to avoid advanced type operations and simplify your component props to a subset that the Vue compiler can analyze.

[productdevbook]

Ok now I get it, great and you're right. Please add a request, type and interface sending feature for attrs from here. :)