histoire: use of histoire in nuxt3 returns vite "could not resolve" errors

Describe the bug

after setting up histoire in nuxt3 and running histoire dev, vite returns a couple of could not resolve errors

it also happens on the nuxt3 StackBlitz demo on the histoire docs

Reproduction

https://stackblitz.com/edit/histoire-nuxt3-starter

System Info

System:
    OS: macOS 12.5.1
    CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
    Memory: 1.64 GB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 103.0.2
    Safari: 15.6.1
  npmPackages:
    @histoire/plugin-nuxt: ^0.10.7 => 0.10.7 
    @histoire/plugin-vue: ^0.10.7 => 0.10.7 
    histoire: ^0.10.7 => 0.10.7 
    vite: ^3.0.9 => 3.1.3

Used Package Manager

yarn

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussion.
The provided reproduction is a minimal reproducible example of the bug.

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 4
Comments: 24 (7 by maintainers)

Most upvoted comments

Thanks @Akryum for working on improving nuxt support!

We also still get problems. So far we observed two:

error 1: __HST_COLLECT__ is not defined

Error while collecting story /Users/Sidestream/t4f/stories/TheHeader.story.vue:
ReferenceError: __HST_COLLECT__ is not defined
    at Module.setupNuxtApp (/Users/Sidestream/t4f/node_modules/.pnpm/registry.npmmirror.com+@histoire+plugin-nuxt@0.15.3_bzmsmzlkppdyvv25zdhrrkbqvy/node_modules/@histoire/plugin-nuxt/dist/runtime/app-setup.js:29:5)
    at Module.setupVue3 (/__resolved__virtual:$histoire-generated-setup-code__-__1:4:31)
    at Module.setupVue3 (/__resolved__virtual:$histoire-generated-global-setup:17:25)
    at v (/Users/Sidestream/t4f/node_modules/.pnpm/registry.npmmirror.com+@histoire+plugin-vue@0.15.3_histoire@0.14.2/node_modules/@histoire/plugin-vue/dist/bundled/client/server/run.js:28:242)
    at async run (/Users/Sidestream/t4f/node_modules/.pnpm/registry.npmmirror.com+histoire@0.14.2_@types+node@18.11.18/node_modules/histoire/dist/node/collect/run.js:6:20)
    at async default (file:///Users/Sidestream/t4f/node_modules/.pnpm/registry.npmmirror.com+histoire@0.14.2_@types+node@18.11.18/node_modules/histoire/dist/node/collect/worker.js:41:5)
    at async file:///Users/Sidestream/t4f/node_modules/.pnpm/registry.npmmirror.com+tinypool@0.1.3/node_modules/tinypool/dist/esm/worker.js:96:20

error 2: ERR_PACKAGE_IMPORT_NOT_DEFINED

TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#app" is not defined in package /Users/.nvm/versions/node/v16.14.2/lib/node_modules/@nuxt/devtools/package.json imported from /Users/.nvm/versions/node/v16.14.2/lib/node_modules/@nuxt/devtools/dist/runtime/plugins/devtools.client.mjs
    at new NodeError (node:internal/errors:371:5)
    at throwImportNotDefined (node:internal/modules/esm/resolve:442:9)
    at packageImportsResolve (node:internal/modules/esm/resolve:819:3)
    at moduleResolve (node:internal/modules/esm/resolve:973:21)
    at defaultResolve (node:internal/modules/esm/resolve:1080:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36)

nuxi info output

- Operating System: `Darwin`
- Node Version:     `v16.14.2`
- Nuxt Version:     `3.1.2`
- Nitro Version:    `2.2.1`
- Package Manager:  `pnpm@7.27.0`
- Builder:          `vite`
- User Config:      `modules`, `build`, `runtimeConfig`, `auth`, `appConfig`, `tailwindcss`, `naiveUI`, `typescript`
- Runtime Modules:  `@sidebase/nuxt-auth@0.4.1`, `@nuxtjs/tailwindcss@6.4.0`, `@huntersofbook/naive-ui-nuxt@0.6.0`, `nuxt-icon@0.2.11`, `@vueuse/nuxt@9.12.0`
- Build Modules:    `-`

BracketJohn on Feb 16, 2023

its still a problem I guess: https://stackblitz.com/edit/histoire-nuxt3-starter-u4prm7?file=nuxt.config.ts,package.json

piscis on Feb 15, 2023

Yup looks like the issue is still here 😐

Akryum on Oct 4, 2022

Starter with latest Nuxt works again with Histoire 0.17.3 https://stackblitz.com/edit/histoire-nuxt3-starter?file=package.json

Akryum on Sep 24, 2023

I had an identical problem, if you use nuxt/tailwindcss + histoire and somehow your stories are included in the component directory or any other path that tailwind will look into to figure out which classes to purge you end up with this error.

In my case I had a story that used logEvent from histoire/client and that story ended up to be included in one of the paths tailwind inspected to index all none-purgeable classes via content directory array.

What solved my problem was to move all *.story.vue components out of the composable, pages, layout directories and put them into a extra story directory

Repo showing the failure: https://stackblitz.com/edit/histoire-nuxt3-starter-wkzb2w This is working afaik: https://stackblitz.com/edit/histoire-nuxt3-starter-vd7d7z

If I’m correct it has something to do with this issue: https://github.com/tailwindlabs/tailwindcss/issues/8828

I tried to solve it by excluding all stories from the list of classes that tailwind will load and inspect. Like so:

...
content: [
  "./components/**/*.{vue}",
  "!./components/**/*.story.{vue}"
]
...

But that did not work for me.

piscis on Jan 27, 2023

I confirm after upgrade to NUXT RC11 i’ve got the same error

taha-azzabi on Oct 7, 2022

Encountering this as well on Nuxt3@rc.11 with the same histoire packages.

cerinoligutom on Oct 3, 2022

Another error using nuxt 3.0.0-rc.13

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: can't access property "push", nuxt.options.watch is undefined".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

reproduction template: -> https://stackblitz.com/edit/histoire-nuxt3-starter-vyrldb

roiLeo on Nov 9, 2022

getting similar thing with axios… any ideas where to dig for the cause? Screenshot 2022-10-26 at 18 59 19

andreemic on Oct 26, 2022

Seems to occur when there are any imports from histoire/client.

cerinoligutom on Oct 3, 2022