histoire

histoire copied to clipboard

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

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

Sep 21 '22 06:09 idorenyinudoh

Encountering this as well on [email protected] with the same histoire packages.

Oct 03 '22 06:10 cerinoligutom

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

Oct 03 '22 08:10 cerinoligutom

Maybe related? https://github.com/histoire-dev/histoire/commit/b2547ce0a6b2ec6b3f1808f8b455b3d95acdb1c1

Oct 03 '22 12:10 Akryum

Nope, the error still persists.

Oct 03 '22 14:10 idorenyinudoh

@idorenyinudoh The change isn't released yet. You tried by cloning histoire repo and building it locally?

Oct 03 '22 15:10 Akryum

It's released now in v0.11.0

Oct 03 '22 18:10 Akryum

Hello! We are currently trying to upgrade our starter from Nuxt3 RC 10 to RC 11 and even after updating histoire to V.0.11.0 we sadly still get the same errors 😞

You can follow our Pull Request here: https://github.com/sidestream-tech/sidebase/pull/52

The error I get is the following. The top part is spammed multiple times. The complete error log can be found here.

✘ [ERROR] Could not resolve "virtual:$histoire-support-plugins-client"

    node_modules/@histoire/app/dist/bundled/components/panel/StorySourceCode.vue_vue_type_script_setup_true_lang.js:6:37:
      6 │ import { clientSupportPlugins } from "virtual:$histoire-support-plugins-client";
        ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "virtual:$histoire-support-plugins-client" as external to exclude it from
  the bundle, which will remove this error.

11:35:19 PM [vite] error while updating dependencies:
Error: Build failed with 4 errors:
node_modules/@histoire/app/dist/bundled/components/panel/StoryDocs.vue_vue_type_script_setup_true_lang.js:4:30: ERROR: Could not resolve "virtual:$histoire-markdown-files"
node_modules/@histoire/app/dist/bundled/components/panel/StorySourceCode.vue_vue_type_script_setup_true_lang.js:6:37: ERROR: Could not resolve "virtual:$histoire-support-plugins-client"
node_modules/@histoire/app/dist/bundled/components/story/GenericRenderStory.vue_vue_type_script_setup_true_lang.js:2:37: ERROR: Could not resolve "virtual:$histoire-support-plugins-client"
node_modules/@histoire/app/dist/bundled/util/config.js:1:30: ERROR: Could not resolve "virtual:$histoire-config"

Thank you in advance! 🤗

Oct 04 '22 21:10 zoey-kaiser

Yup looks like the issue is still here :|

Oct 04 '22 21:10 Akryum

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

Oct 07 '22 15:10 taha-azzabi

Update here: I checked it out with nuxt 3.0.0-rc.12-27766643.9388e65 today (latest release as of writing) and still get the same problem:

✘ [ERROR] Could not resolve "virtual:$histoire-config"

    node_modules/@histoire/app/dist/bundled/util/config.js:1:30:
      1 │ import { config, logos } from "virtual:$histoire-config";
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "virtual:$histoire-config" as external to exclude it from the bundle, which
  will remove this error.

@Akryum do you know if the nuxt-team is aware of the problem? If I remember correctly on twitter you told me that this is related to something in the nuxt framework.

Oct 17 '22 12:10 BracketJohn

getting similar thing with axios... any ideas where to dig for the cause?

Oct 26 '22 18:10 andreemic

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

Nov 09 '22 12:11 roiLeo

@andreemic Looks like the axios code is not valid standard ESM. Can you try viteNodeInlineDeps to pre-compile it?

Nov 11 '22 22:11 Akryum

I'm still encountering these could not resolve errors with nuxt v3.1.0 and histoire v0.12.4.

I'm just using the example with a simple button, simple story and use vue + nuxt plugin.

Any ideas on what's it about or there are plans to fix it?

Externalizing (like the errors sugges) don't work.

Jan 25 '23 10:01 jclaessens97

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.

Jan 27 '23 18:01 piscis

@piscis that's a really good catch. For me it also works when I create a folder outside of components.

However when I add '!./components/**/*.story.{js,vue,ts}', file to my tailwind.config.ts content array it's working, but throws the same error in my command line...

Jan 30 '23 14:01 jclaessens97

@jclaessens97 yes that’s what I meant when I said it’s not working. I received a ship load of errors by the tailwind purge content process but tailwind and component styles get applied correctly.

Also down the line if you put stories inside of the components directory Nuxt will wrap them in a lazy load component afaik so I don’t know if it could potentially extend the build time when developing because of all the unused story components. Maybe putting stories inside of a components directory or any other directory that Nuxt/tailwind and Nuxt3 auto loads vue files from should be considered an anti pattern?

Jan 30 '23 14:01 piscis

Yeah I guess so... Or being able to exclude a component or components from the autoimport would be a nice addition...

I really like to follow the structure of

/button
   /Accept.vue
   /Accept.story.vue

So being able to exclude a component from autoimport would really help here. Either on component level or setting a glob in nuxt.config.ts 🤔

But yeah.. I'm already glad I have a working solution now 😄

Jan 30 '23 15:01 jclaessens97

@jclaessens97 If you really want to go with stories in component structure there is also a hack I found you can use by basically externalize the histoire dependencies and alias one virtual include to lead to an empty file.

Example: https://stackblitz.com/edit/histoire-nuxt3-starter-8anjmu?file=nuxt.config.ts

From nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  vite: {
    resolve: {
      alias: {
        'virtual:$histoire-config': './hacky.js',
      },
    },
    optimizeDeps: {
      exclude: [
        'virtual:$histoire-markdown-files',
        'virtual:$histoire-support-plugins-client',
      ],
    },
  },
})

It's a pretty evil hack ;-) and I decided against it

Jan 30 '23 16:01 piscis

Please give [v0.15.0] a try and report back if your issue is solved or not :pray:

Feb 15 '23 14:02 Akryum

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

Feb 15 '23 19:02 piscis

Thanks @Akryum for working on improving nuxt support!

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

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+@[email protected]_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+@[email protected][email protected]/node_modules/@histoire/plugin-vue/dist/bundled/client/server/run.js:28:242)
    at async run (/Users/Sidestream/t4f/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/histoire/dist/node/collect/run.js:6:20)
    at async default (file:///Users/Sidestream/t4f/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/histoire/dist/node/collect/worker.js:41:5)
    at async file:///Users/Sidestream/t4f/node_modules/.pnpm/[email protected]/node_modules/tinypool/dist/esm/worker.js:96:20

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)

- Operating System: `Darwin`
- Node Version:     `v16.14.2`
- Nuxt Version:     `3.1.2`
- Nitro Version:    `2.2.1`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `modules`, `build`, `runtimeConfig`, `auth`, `appConfig`, `tailwindcss`, `naiveUI`, `typescript`
- Runtime Modules:  `@sidebase/[email protected]`, `@nuxtjs/[email protected]`, `@huntersofbook/[email protected]`, `[email protected]`, `@vueuse/[email protected]`
- Build Modules:    `-`

Feb 16 '23 08:02 BracketJohn

@BracketJohn I get the same error 2.

Created a new issue here https://github.com/histoire-dev/histoire/issues/587

Aug 28 '23 08:08 zweeen

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

Sep 24 '23 23:09 Akryum