Tree Shaking with Vite not working

[jenjen75]

Bug 🐞

What is the current behavior?

To reduce bundle-size, I follow the documentation recommandation : https://www.algolia.com/doc/guides/building-search-ui/going-further/improve-performance/vue/?client=Vue+3#optimize-build-size

When running npm run build, all vue-instantsearch is compiled whereas I simply do import 'vue-instantsearch/vue3/es'; in counter.js file.

Make a sandbox with the current behavior

https://stackblitz.com/edit/vitejs-vite-nyimj5?file=counter.js&terminal=dev

What is the expected behavior?

import 'vue-instantsearch/vue3/es'; in counter.js file should import nothing

What is the proposed solution?

What is your recommandation to make tree-shaking working ?

What is the version you are using?

"vue-instantsearch": "^4.6.0"

[Haroenv]

I hope this can be fixed in Vite, as it's fixed in webpack, but for the mean time, you can import the individual components like this:

import SearchBox from 'vue-instantsearch/vue3/es/src/components/SearchBox.vue'

[alex-galey]

I am facing the same issue and tried several ways to import the components (directly in the template, global plugin with app.use(), with InstantSearch as a module or as a component, InstantSearchSsr etc.) and none worked as vite failed to import InstantSearch :

[vite-plugin-pwa:build] [vite]: Rollup failed to resolve import "vue-instantsearch/vue3/es/src/components/InstantSearch.vue" from "src/modules/instantsearch-ui.ts"