Nuxt•3mo ago

Tree-Shaking does not work when using multiple stores in Nuxt

When using Pinia in a Nuxt project and creating more than one store, tree-shaking does not work as expected. Here's an example to illustrate the issue:

// store/foo.ts
export const useFooStore = defineStore('foo', () => ({ foo: ref('foofoofoo') }));

// store/bar.ts
export const useBarStore = defineStore('bar', () => ({ bar: ref('barbarbar') }));

// store/foo.ts
export const useFooStore = defineStore('foo', () => ({ foo: ref('foofoofoo') }));

// store/bar.ts
export const useBarStore = defineStore('bar', () => ({ bar: ref('barbarbar') }));

<!-- app.vue -->
<script setup lang="ts">
if (false) {
  // cannot tree-shake
  console.log(useFooStore());
  console.log(useBarStore());
}
</script>

<!-- app.vue -->
<script setup lang="ts">
if (false) {
  // cannot tree-shake
  console.log(useFooStore());
  console.log(useBarStore());
}
</script>

After running nuxt generate, both the foo and bar stores are bundled into the output, even though they are inside a conditional block that should never run. However, if I use only one store within the if (false) block, tree-shaking works as expected:

<!-- app.vue -->
<script setup lang="ts">
if (false) {
  // can tree-shake
  console.log(useFooStore());
}
</script>

<!-- app.vue -->
<script setup lang="ts">
if (false) {
  // can tree-shake
  console.log(useFooStore());
}
</script>

In this case, the unused store is successfully tree-shaken and not included in the bundle. Reproduction https://stackblitz.com/edit/github-dylldh?file=app.vue GitHub Issue https://github.com/vuejs/pinia/issues/2738

SerKo

StackBlitz

Issue vuejs/pinia#2738 - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

GitHub

Tree-Shaking does not work when using multiple stores in Nuxt · Iss...

NoteI’m not sure if this issue is related to Pinia, Nuxt, Vite or Rollup, but since the problem occurs specifically when using defineStore exports, and not with other composables or exports so I’m ...

1 Reply

SerKo•3mo ago

Update: solved by https://github.com/vuejs/pinia/pull/2740

GitHub

chore: add #__NO_SIDE_EFFECTS__ notation to defineStore by serk...

Fix #2738 In defineStore, certain behaviors of createSetupStore and createOptionsStore might prevent the bundler from performing static analysis to determine whether there are any side effects. The...

Gaming

Programming

Tree-Shaking does not work when using multiple stores in Nuxt