vite Dependency optimization imports package file twice

[Coding-Kiwi]

I have the following setup:

my-package/use/toasts.js

const toast = reactive([]);

function addToast(){
  toasts.push({msg: "test"});
}

export {
  toasts,
  addToast
}

my-package/components/Toasts.vue

<script setup>
import {toasts} from "../use/toasts.js

...
</script>

project/Test.vue

<script setup>

import { Toasts } from 'my-package/components/Toasts.vue';
import { addToast } from 'my-package/use/toasts.js';

setTimeout(() => {
  addToast();
});

</script>

<template>
      <Toasts />
</template>

But this does not work because toast.js is loaded twice:

toasts.js loaded from http://localhost:5173/node_modules/my-package/use/toasts.js?v=6cc3eb86
toasts.js loaded from http://localhost:5173/node_modules/.vite/deps/my-package_use_toasts.js?v=9bfa181b

Thus addToasts in my projects adds to a reactive array that has nothing to do with the reactive array in the package Toasts.vue

I can "fix" this by nuking dependency optimization for my package

export default defineConfig({
    ...
    optimizeDeps: {
        exclude: ['my-package'],
    },
});

But that does not feel like the right thing to do.

[hi-ogawa]

It would be nice to see a full reproduction to understand better, but this is a known behavior and optimizeDeps.exclude is required unfortunately. One question would be, .vite/deps/my-package_use_toasts.js means that you likely imported my-package/use/toasts.js directly from your project too, but it's not in your description. How does it look like?

[Coding-Kiwi]

yes, sry I forgot the

import { addToast } from 'my-package/use/toasts.js';

line (I edited my post) so both the component and the function are imported from the package

[hi-ogawa]

The reason is because js is optimized by default but vue cannot be optimized by default. I don't think adopting this behavior dynamically per package is possible right now, but maybe having a warning to suggest optimizeDeps.exclude could be nice to have. That's actually something I implemented for rsc plugin vitejs/vite-plugin-react#705