histoire-dev / histoire-dev/histoire

Error [ERR_UNSUPPORTED_DIR_IMPORT] when trying to use `@heroicons/vue` with `histoire`

Open
#696 8 comments 1 reaction 0 assignees View on GitHub
to triage
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.