histoire-dev / histoire

âš¡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.16k stars 186 forks source link

Using historie with Pinia #303

Closed zoey-kaiser closed 2 years ago

zoey-kaiser commented 2 years ago

Describe the bug

Hello! 👋

We are currently working on a Nuxt3 starter template called sidebase. In https://github.com/sidestream-tech/sidebase/pull/51 we are attempting to add the store management system Pinia to our scaffold. We are also using historie for stories.

We generally expect developers to attempt to avoid adding external state management into components that have stories, however we would like it if historie would still be able to load the stories (without the state functionality) for the case that it does happen. Ideally it would throw a warning, but not an error.

In my own testing, a component throws the following error when a store is used inside of it:

Error while collecting story /sidebase/components/example/Status.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#imports" is not defined in package /sidebase/node_modules/@pinia/nuxt/package.json imported from /sidebase/node_modules/@pinia/nuxt/dist/runtime/composables.mjs
    at new NodeError (node:internal/errors:387:5)
    at throwImportNotDefined (node:internal/modules/esm/resolve:453:9)
    at packageImportsResolve (node:internal/modules/esm/resolve:836:3)
    at moduleResolve (node:internal/modules/esm/resolve:994:21)
    at defaultResolve (node:internal/modules/esm/resolve:1214:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)

Does anyone have any ideas that could help us? Thank you in advance 🤗

Reproduction

You can find the PR here: https://github.com/sidestream-tech/sidebase/pull/51

If you refer to a store in a component that has a story, you will be able to reproduce the error.

System Info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 147.05 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Brave Browser: 105.1.43.93
    Chrome: 103.0.5060.114
    Firefox: 105.0
    Safari: 16.0
  npmPackages:
    @histoire/plugin-nuxt: ^0.10.7 => 0.10.7 
    @histoire/plugin-vue: ^0.10.7 => 0.10.7 
    @vitejs/plugin-vue: ^3.0.3 => 3.1.0 
    histoire: ^0.10.7 => 0.10.7 


### Used Package Manager

npm

### Validations

- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) 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](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Akryum commented 2 years ago

Porbably the same issue as #286