Imported component from local vite+vue library not updating

user_252638 0
Viewed 709

I'm researching options for a new project at work. We're thinking of using nuxt (or just regular vue 3) and creating a library where we will be keeping our shared components.

I'm trying to do the initial setup, but am having problems. I followed this tutorial to create the library and added typescript to it. I created a sample component with a counter and exported it.

The problem is that when I import the component from my library in a consuming project (whether it's the nuxt project or a vanilla vite vue project), the component looks like it's not reactive. Its internal counter is supposed to increase when it's clicked, but it's not updating. There are no errors or warning in the console.

Another issue is that its CSS is not being applied. It has some basic styling defined in the component, but it's not visible. I've created a minimal reproduction repo with setup instructions here: https://github.com/drekembe/vite-reproduction-2342

I've tried searching for similar issues or debugging it myself, but I haven't gotten anywhere.

Any help is greatly appreciated.

vite nuxt.js vuejs3 vue.js javascript
2 Answers

In your components folder run :

yarn build

then run :

yarn link

in my-vite-app folder run :

 yarn link "components"

in the maint.ts import the style :

import { createApp } from 'vue'
import App from './App.vue'
import 'components/dist/style.css'
createApp(App).mount('#app')
user_81728570

I encounter this problem today with my package and finally, I found the real culprit is the node_module inside the package that we tested locally. If you install the local package by npm link or install directly with the folder path like "components": "../components", your node_module will look like:

node_modules
  |
   --components
      |
       --node_modules <-- the culprit here

Your package will be shipped with its own node_module and inside that module has a vue package that is independent of the vue package that you are using in your app. So your components would not work as expected.

To test it, just delete the node_modules/components/node_modules and the vite cache node_modules/.vite then run yarn dev again. You will see your component works fine now.

Solution:

  • In your package folder components run npm pack to pack your package. It will create a tarball for your package. The output is the components-0.0.0.tgz file inside the components folder. This is the most important part because npm pack will create a pack of your package that is similar to what you will publish to the npm registry.
  • Now in your test project my-vite-app add your package to the package.json: "components": "file:../components/components-0.0.0.tgz"
  • Run yarn to install the package and yarn dev to run the app and see if your components work.
  • Every time you make a change on your package, don't forget to pack the package again and re-install it. You might want to increase your package version to invalidate the yarn cache
user_42546810
Related