mapActions doesn't work in production build

[darxsideblues]

Hi,

So, I encountered some error in production build, these are steps I followed:

npm init vue@latest (choose router, pinia, no tests and linter, javascript)

added this code:

<script setup>
import { storeToRefs, mapActions } from "pinia";
import { useCounterStore } from "@/stores/counter";

const main = useCounterStore();
const { count, doubleCount } = storeToRefs(main);
const { increment } = mapActions(useCounterStore, ["increment"]);
const reset = () => main.$reset();
</script>

<template>
  <div>
    <p>Counter: {{ count }}</p>
    <p>Double counter: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="reset">Reset store</button>
  </div>
</template>

and with npm run dev it works fine, but when I do npm run build I got error like:

TypeError: Cannot read properties of undefined (reading '$pinia')

when I remove mapActions and use function instead it works

function increment() {
  main.increment();
}

I didn't modify any of files, only HelloWorld.vue component, so my vite.config.js is default,
maybe I'm missing something?

Thanks.