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

idorenyinudoh commented 2 years ago

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.

cerinoligutom commented 2 years ago

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

cerinoligutom commented 2 years ago

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

Akryum commented 2 years ago

idorenyinudoh commented 2 years ago

Nope, the error still persists.

Akryum commented 2 years ago

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

Akryum commented 2 years ago

It's released now in v0.11.0

zoey-kaiser commented 2 years ago

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! 🤗

Akryum commented 2 years ago

Yup looks like the issue is still here :|

taha-azzabi commented 2 years ago

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

BracketJohn commented 2 years ago

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.

andreemic commented 2 years ago

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

roiLeo commented 2 years ago

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

Akryum commented 2 years ago

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

jclaessens97 commented 1 year ago

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.

piscis commented 1 year ago

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.

jclaessens97 commented 1 year ago

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

piscis commented 1 year ago

@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?

jclaessens97 commented 1 year ago

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 😄

piscis commented 1 year ago

@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

Akryum commented 1 year ago

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

piscis commented 1 year ago

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

BracketJohn commented 1 year ago

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

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

```zsh 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. (node:internal/modules/esm/module_job:79:40) at link (node:internal/modules/esm/module_job:78:36) ```

nuxi info output

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

zweeen commented 1 year ago

@BracketJohn I get the same error 2.

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

Akryum commented 1 year ago

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

histoire-dev / histoire