histoire-dev / histoire-dev/histoire
Error [ERR_UNSUPPORTED_DIR_IMPORT] when trying to use `@heroicons/vue` with `histoire`
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
When importing Hero Icons from the `@heroicons/vue` in a Histoire story, `histoire` will throw the following error:
```
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/node_modules/@heroicons/vue/24/outline/esm' is not supported resolving ES modules imported from /node_modules/vite-node/dist/client.mjs
```
`npm run dev` and `npm run build` are both able to load the icons in Vue components. This error is only present when running `npm run story:dev` and `npm run story:build`
### Reproduction
This is a StackBlitz link that reproduces the error: https://stackblitz.com/edit/histoire-vue3-starter-zyx8z5?file=package.json
Unfortunately the error StackBlitz shows is different from the one node shows, so I have also added the code to a GitHub repo so it can be run locally. https://github.com/nfaucher8/histoire-heroicons-example
Also this example shows that when running the same project with older versions of the dependencies the error is not present https://stackblitz.com/edit/histoire-vue3-starter-rmib7n?file=package.json
### System Info
```shell
System:
OS: macOS 13.6.2
CPU: (10) arm64 Apple M1 Max
Memory: 3.17 GB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
pnpm: 7.30.0 - /usr/local/bin/pnpm
Browsers:
Chrome: 119.0.6045.105
Firefox Nightly: 77.0a1
Safari: 16.6
npmPackages:
@histoire/plugin-vue: ^0.17.12 => 0.17.12
@vitejs/plugin-vue: ^5.0.4 => 5.0.4
histoire: ^0.17.9 => 0.17.9
vite: ^5.1.4 => 5.1.4
```
### 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.
Contributor guide
Assessment
This issue has not been assessed yet.