Vite optimization treats re-exported stores as different references

[mattjennings]

Describe the bug

If you have a library that re-exports stores (say, in an index.js from ./store.js), the exported store from index.js is a different reference than the same one from ./store.js.

This is not the case if the package is excluded from optimizeDeps.

Reproduction

URL: https://github.com/mattjennings/vite-svelte-store-bug

add-numbers package:

// index.js
export { total, add } from './store'
export { default as Total } from './Total.svelte'

// store.js
import { writable } from "svelte/store";

export const total = writable(0);

export function add(number) {
  total.update((prev) => prev + number);
}

<!-- Total.svelte -->
<script>
  import { total } from "./store";
</script>

{$total}

and in your App, you use it like so:

<script>
  import { add, total, Total } from "add-numbers";
</script>

<button on:click={() => add(1)}>add</button>

Store: {$total}

Component: <Total />

$total updates correctly, <Total /> does not.

If you import the stores from store.js:

<script>
  import { add, total } from "add-numbers/store.js"
  import { Total } from 'add-numbers'
</script>

<button on:click={() => add(1)}>add</button>

Store: {$total}

Component: <Total />

then it updates as expected. Otherwise, you need to pass the library into optimizeDeps.exclude in vite config.

Logs

No response

System Info

System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 233.43 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
    npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm
  Browsers:
    Brave Browser: 92.1.27.109
    Chrome: 92.0.4515.107
    Safari: 14.1.1
    Safari Technology Preview: 15.0
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^1.0.0-next.11 => 1.0.0-next.15 
    svelte: ^3.37.0 => 3.41.0 
    vite: ^2.4.4 => 2.4.4

Severity

annoyance

[bluwy]

Related: vitejs/vite#3910. Currently a bug in vite unfortunately.

[dominikg]

thanks @bluwy

The workaround is to add the dependency to optimizeDeps.exclude in vite config. I'll add a feature request to automate this, though that won't be perfect either.

[bluwy]

I think we should close this and continue tracking in #125 or vitejs/vite#3910. It isn't just stores that have different references, any singleton pattern would suffer the same issue, so it isn't specific to Svelte per se.

[mattjennings]

I agree, I'll close this now.

[bluwy]

Svelte dependencies are now automatically added to optimizeDeps.exclude, which should avoid this from happening by default. Released in 1.0.0-next.18.