Building modules (lib) with Vite + Vue3 + Typescript fails

[holtwick]

Describe the bug

Building a module with Vite fails when the final product is built (vite build). But it works in developer preview (vite).

Reproduction

1. Create a Vue3+TS module as described in https://vitejs.dev/guide/build.html#library-mode
2. Build for distribution with npm run build
3. Use it in another Vite+Vue3+TS project

Sample project:
sample.zip

How to use:

1. Go into /lib and call: npm install && npm run build
2. Go into /main and call: npm install && npm run build && npm run serve

Expected: See output from lib component.

Actual: No output, but console output from same component shows up. Also works in dev mode, try npm run dev.

System Info

• vite version: 2.0.5
• Operating System: macOS M1 11.2.3
• Node version: v15.11.0 (brew)
• Package manager (npm/yarn/pnpm) and version: 7.6.1

[holtwick]

In general it would be great to have an example of best practice how to use vite to build modules / libs ❤️

[holtwick]

It looks like the issue origins from duplicate integration of vue package. Using https://vitejs.dev/config/#resolve-dedupe seems to solve the issue. In vue.config.ts add:

  resolve: {
    dedupe: ["vue"],
  },

This was hard to find. Adding an example to the documentation or the scaffolding code would be very much appreciated.

[brunokunace]

I have a similar issue, i try make a lib with ts, vue3 and vite and all works to publish on npm, but when i try to use this on another project, yarn/npm not found on node_modules this package.

package: https://github.com/brunokunace/vue3-pix

Error:

anyone can help? Its my first time making a lib.

(accept PR too)

[holtwick]

@brunokunace You refer to vue- but you generate vue3- named files. The file names do not match. It is a typo you need to fix in package.json.

[brunokunace]

@holtwick yes, is it, sorry about this stupid question, now all works!

[jscptman]

i reproduced the bug, and the process didn't even report an error.😳

[igortrinidad]

I'm facing the same issue while updating a Vue library:

https://github.com/igortrinidad/vue-number-format/blob/update-docs-vue-installation/vite.config.js

The library build runs successful, the application run successfully with the library in development mode but when the application build throws this error: