Skip to content

complex-types not working for vite build #59

@mmdlow

Description

@mmdlow

Describe the bug

Hi, I can't seem to get complex-types working for my Vue/Vite/Typescript project build, am currently still noticing the error mentioned in the vue core #8286 issue during the vite build step. Wondering if it could be an issue with my vite configuration which you can see below.

One thing I'm a little confused about is which version of complex-types I should be using in my Vite config, since I'm expecting complex-types to be applied during the build step, and Vite uses rollup for the build step. I'm currently including complex-types as a rollup plugin in my vite.config.ts

Output

error during build:
Error: [vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/workspace/src/Button/MyButton.vue
6  |  import { ButtonHTMLAttributes } from "vue";
7  |  
8  |  interface MyButtonProps extends ButtonHTMLAttributes {
   |                                  ^^^^^^^^^^^^^^^^^^^^
9  |    label: string;
10 |  }
file: /workspace/src/Button/MyButton.vue
    at ScriptCompileContext.error (/workspace/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15575:11)
    at resolveInterfaceMembers (/workspace/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18036:13)
    at innerResolveTypeElements (/workspace/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17813:14)
    at resolveTypeElements (/workspace/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17799:20)
    at innerResolveTypeElements (/workspace/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17866:16)
    at resolveTypeElements (/workspace/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17799:20)
    at resolveRuntimePropsFromType (/workspace/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19324:20)
    at extractRuntimeProps (/workspace/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19300:17)
    at genRuntimeProps (/workspace/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19288:18)
    at Object.compileScript (/workspace/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:20384:21)

package.json

{
  "name": "vue-vite-component-library",
  "version": "1.0.0",
  "description": "JavaScript and TypeScript example starter project",
  "type": "module",
  "scripts": {
    "build": "vue-tsc --p ./tsconfig.build.json && vite build"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@types/node": "^20.11.30",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue.ts/complex-types": "^0.5.0",
    "sass": "^1.72.0",
    "sass-loader": "^14.1.1",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vite-plugin-dts": "^3.7.3",
    "vue-tsc": "^2.0.6"
  }
}

vite.config.ts

import { defineConfig } from "vite";
import { resolve } from "path";
import complexTypesRollup from "@vue.ts/complex-types/rollup";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), dts({ tsconfigPath: "tsconfig.build.json" })],
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      formats: ["es"],
    },
    rollupOptions: {
      external: ["vue"],
      plugins: [
        complexTypesRollup({
          tsconfigPath: resolve(__dirname, "tsconfig.build.json"),
        }),
      ],
    },
  },
});

Reproduction

https://codesandbox.io/p/devbox/rrzs2y

System Info

N/A

Used Package Manager

[email protected]

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions