nuxt3 bulid error

[waset]

// shell
$ node .output/server/index.mjs
Listening on http://localhost:3000/
TypeError: extender is not a function
    at file:///Volumes/www/vue/.output/server/node_modules/pinia/dist/pinia.mjs:1558:43
    at EffectScope.run (/Volumes/www/vue/.output/server/node_modules/@vue/reactivity/dist/reactivity.cjs.js:27:24)
    at file:///Volumes/www/vue/.output/server/node_modules/pinia/dist/pinia.mjs:1558:33
    at Array.forEach (<anonymous>)
    at createSetupStore (file:///Volumes/www/vue/.output/server/node_modules/pinia/dist/pinia.mjs:1545:14)
    at createOptionsStore (file:///Volumes/www/vue/.output/server/node_modules/pinia/dist/pinia.mjs:1142:13)
    at useStore (file:///Volumes/www/vue/.output/server/node_modules/pinia/dist/pinia.mjs:1622:17)
    at setup (file:///Volumes/www/vue/.output/server/chunks/app/server.mjs:10416:23)
    at _sfc_main.setup (file:///Volumes/www/vue/.output/server/chunks/app/server.mjs:10656:23)
    at callWithErrorHandling (file:///Volumes/www/vue/.output/server/chunks/index.mjs:1957:22)
[Vue warn]: Component  is missing template or render function.

and in Browser：

Hydration completed but contains mismatches. 

My environment：

package.json

{
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "deploy": "yarn build && yarn start",
    "start": "node .output/server/index.mjs"
  },
  "devDependencies": {
    "naive-ui": "^2.26.0",
    "nuxt-windicss": "^2.2.8",
    "nuxt3": "latest",
    "unplugin-vue-components": "^0.17.21"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.1.8",
    "pinia": "^2.0.11",
    "pinia-plugin-persistedstate": "^1.3.0"
  }
}

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'
import Components from 'unplugin-vue-components/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    build: {
        // fix dev error: Cannot find module 'vueuc'
        transpile: ['vueuc'],
    },
    vite: {
        plugins: [
            Components({
                // Automatically register all components in the `components` directory
                resolvers: [NaiveUiResolver()],
            }),
        ],
        // @ts-expect-error: Missing ssr key
        ssr: {
            noExternal: ['moment', 'naive-ui'],
        },
    },
    buildModules: [
        /**
         * @see https://cn.windicss.org
         */
        'nuxt-windicss',
        /**
         * @see https://pinia.vuejs.org
         */
        '@pinia/nuxt',
    ],
    windicss: {
        analyze: true
    }
})

plugins/pinia-persist.ts

import PiniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.$pinia.use(PiniaPluginPersistedstate)
})

composables/useUser.ts

import { defineStore } from "pinia";

export default defineStore({
    id: 'user',
    state: () => ({
        a: 1
    }),
    getters: {

    },
    actions: {
    },
    persist: {
        storage: {
            getItem: (key) => { return useCookie(key, { encode: x => x, decode: x => x }).value },
            setItem: (key, value) => { useCookie(key, { encode: x => x, decode: x => x }).value = value },
        },
    },
})

[waset]

But this will not affect its normal operation. There is data in the cookie

[waset]

If I rename the plugins to .client.ts, let it run on the client, there will be no such error, and everything will become normal again.

[prazdevs]

Mmh, indeed, I didn't get this error before.
The issue with adding .client is that the plugin won't be run during server-side rendering.
I don't have an idea on what is actually causing that tbh.

If anyone has an idea, feel free to help. 🥺

[prazdevs]

Ok, with the latest createPersistedState factory function introduced in v1.4.0, I managed to have everything fully functional with useCookie even on server side.

plugins/persistedstate.ts

import { createPersistedState } from 'pinia-plugin-persistedstate'

import { defineNuxtPlugin, useCookie } from '#app'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.$pinia.use(createPersistedState({
    storage: {
      getItem: key => {
        return useCookie(key, { encode: (x: any) => x, decode: (x: any) => x })
          .value
      },
      setItem: (key, value) => {
        useCookie(key, { encode: (x: any) => x, decode: (x: any) => x }).value =
          value
      },
    },
  }))
})

stores/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    username: 'PraZ',
  }),
  persist: true
})

@waset tell me if that fixes it for you as well, and I will update the Nuxt usage docs anyways. I may work later on a createNuxtPersistedState helper anyway to make things more simple.

[prazdevs]

Feel free to reopen if you still encounter an issue (with 1.5.0 once released)

[waset]

It's so cool that it can be run and bulid.
Praise the function of this factory. I'm such a lazy person. I need public configuration too much.