Nuxt•2y ago•

1 reply

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

nuxt generate

, both the

foo

foo

and

bar

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)

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

StackBlitzSerKo

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 ...

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

nuxt generate

, both the

foo

foo

and

bar

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)

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>

StackBlitzSerKo

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...

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

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

Similar Threads

Similar Threads

Similar Threads