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

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

``` typescript 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

``` typescript import PiniaPluginPersistedstate from 'pinia-plugin-persistedstate' import { defineNuxtPlugin } from '#app' export default defineNuxtPlugin(nuxtApp => { nuxtApp.$pinia.use(PiniaPluginPersistedstate) }) ```

composables/useUser.ts

``` typescript 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

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

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