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

[nfaucher8]

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

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

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

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• histoire-vue3-starter-zyx8z5 (Open reproduction)
• histoire-vue3-starter-rmib7n (Open reproduction)

[GerryWilko]

I have run into this issue too. Trying to work out what is going wrong. At the moment from what I can see the package mlly's isValidNodeImport is returning false for heroicons imports on the non-working reproduction you link and true on the new versions which then treats heroicons as an externalized module and is causing errors.

isValidNodeImport v1.4.2 mlly

/Users/gerard/Downloads/histoire-vue3-working/node_modules/@heroicons/vue/24/outline/esm false

isValidNodeImport v1.6.1 mlly

/Users/gerard/Downloads/histoire-vue3-broken/node_modules/@heroicons/vue/24/outline/esm true

[GerryWilko]

I believe this issue is because histoire is using quite an old version of vite-node. The _shouldExternalize function in vite-node doesnt seem to play nicely with this newer mlly version that is being used.

[GerryWilko]

This issue can be worked around for now by pinning the version of mlly:

"mlly": "1.4.2",

[SteinRobert]

Ran into the same issue.

"mlly": "1.4.2",

This does help indeed, thank you.

[danawoodman]

Just reported a possibly related issue when using csv-parse: #712