[nuxt] usage with Histoire

[zarskilukasz]

Describe the bug

Hi, I'm using a plugin for Nuxt and I'm having trouble integrating it with Histoire (https://github.com/histoire-dev/histoire).

Reproduction steps: Run pnpm story:dev

Error: [nuxt] error caught during app initialization TypeError: Cannot destructure property 'cookieOptions' of '__vite_ssr_import_2__.useRuntimeConfig(...).public.persistedState' as it is undefined. at Object.setup (/nuxt-app/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@pinia-plugin-persistedstate/nuxt/dist/runtime/plugin.mjs:8:11) at wrapper (/nuxt-app/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/nuxt/dist/app/nuxt.js:191:21) at /nuxt-app/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/nuxt/dist/app/nuxt.js:111:58 at fn (/nuxt-app/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/nuxt/dist/app/nuxt.js:208:44) at Object.runWithContext (/nuxt-app/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3855:18) at callWithNuxt (/nuxt-app/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/nuxt/dist/app/nuxt.js:213:24) at Object.runWithContext (/nuxt-app/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/nuxt/dist/app/nuxt.js:32:29) at applyPlugin (/nuxt-app/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/nuxt/dist/app/nuxt.js:111:37) at Module.applyPlugins (/nuxt-app/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/nuxt/dist/app/nuxt.js:123:21) at async initApp (/nuxt-app/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/nuxt/dist/app/entry.js:53:7) [nuxt] error caught during app initialization ReferenceError: document is not defined at normalizeContainer (/nuxt-app/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1440:17) at app.mount (/nuxt-app/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1371:23) at initApp (/nuxt-app/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/nuxt/dist/app/entry.js:61:14)

When I don't use the @pinia-plugin-persistedstate/nuxt plugin, the error doesn't occur.

Reproduction

https://github.com/zarskilukasz/nuxt-minimal

System Info

System:
    OS: macOS 13.4
    CPU: (8) arm64 Apple M2
    Memory: 601.13 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Firefox: 111.0.1
    Safari: 16.5

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible of the bug.

[prazdevs]

the provided repo gives me an error on install 🤔

pnpm: /@akryum/[email protected] is an invalid relative dependency path
    at Object.parse2 [as parse] (C:\Users\praz\.node\corepack\pnpm\8.2.0\dist\pnpm.cjs:113619:15)
    at nameVerFromPkgSnapshot (C:\Users\praz\.node\corepack\pnpm\8.2.0\dist\pnpm.cjs:113728:28)
    at addPreferredVersionsFromLockfile (C:\Users\praz\.node\corepack\pnpm\8.2.0\dist\pnpm.cjs:186437:89)
    at getPreferredVersionsFromLockfileAndManifests (C:\Users\praz\.node\corepack\pnpm\8.2.0\dist\pnpm.cjs:186431:7)
    at _installInContext (C:\Users\praz\.node\corepack\pnpm\8.2.0\dist\pnpm.cjs:187332:142)
    at async installInContext (C:\Users\praz\.node\corepack\pnpm\8.2.0\dist\pnpm.cjs:187663:16)
    at async _install (C:\Users\praz\.node\corepack\pnpm\8.2.0\dist\pnpm.cjs:187202:25)
    at async mutateModules (C:\Users\praz\.node\corepack\pnpm\8.2.0\dist\pnpm.cjs:186936:23)
    at async install (C:\Users\praz\.node\corepack\pnpm\8.2.0\dist\pnpm.cjs:186862:24)
    at async installDeps (C:\Users\praz\.node\corepack\pnpm\8.2.0\dist\pnpm.cjs:188821:31)

[zarskilukasz]

The error you're receiving is likely related to the version of pnpm or node.js.

Please follow the steps below for reproduction => https://stackblitz.com/edit/nuxt-starter-27hxyy

[prazdevs]

Ok, I have it working but have several concerns:

1. Why would pinia be needed for histoire components ?
2. Is the issue only with this particular pinia plugin ?

I'm also curious if it'd happen as well if we were to use addTemplate again to provide options to runtime. 🤔
Once I tackle this issue, I'll look into this histoire story (yes the pun is intended).

[zarskilukasz]

1 .Because I have a very large application and I want to avoid the emit hell by passing props through multiple levels. 2. Yes, it's only a problem with this plugin. A simple test: I remove it from the project and there are no errors.

addTemplate seems like a good idea.

[prazdevs]

My question was more "is there another plugin that can cause this" and i think there may be. For some reason, the config options just dont get passed 🤔

[zarskilukasz]

No. See (https://stackblitz.com/edit/nuxt-starter-27hxyy), I only use Nuxt, Pinia, and Historie - in this setup, I don't have any errors - I add a plugin and I get errors.

[prazdevs]

Hi, as a temporary workaround, you can disable the plugin for when the project is run by histoire with this

export default defineNuxtConfig({
  modules: [
	// ... other modules
    process.env.HISTOIRE ? undefined : "@pinia-plugin-persistedstate/nuxt",
  ],
})

[kilab]

@prazdevs in my case, your proposal of a temporary workaround doesn't work. I have a CardTypeProperty component for which I have written a story. This component refers to the store/favourites where I use persistedState :(

Error while collecting story /wrk/stories/cards/CardTypeProperty.story.vue:
ReferenceError: persistedState is not defined
    at /wrk/stores/favourites.ts:17:14