Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

complex-types not working for vite build #59

Open
mmdlow opened this issue Mar 26, 2024 · 0 comments
Open

complex-types not working for vite build #59

mmdlow opened this issue Mar 26, 2024 · 0 comments

Comments

@mmdlow
Copy link

mmdlow commented Mar 26, 2024

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

npm@10.2.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant