histoire-dev / histoire-dev/histoire

Cannot find @babel/runtime with Ant Design Vue

Open
#771 2 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

Hello!

I tried using Histoire with Ant Design Vue on a create-vue@v3.12.1 (Vite 5) starter template, but during story collection, Histoire throws an error:
```bash
Cannot find module /node_modules/@babel/runtime/helpers/esm
imported from file:///home/projects/vitejs-vite-cmhkz4,
file:///home/projects/,
file:///home/projects/vitejs-vite-cmhkz4/_index.js,
file:///home/projects/node_modules
```

Full Log

Collect stories start MyButton

Error while collecting story /home/projects/vitejs-vite-cmhkz4/src/MyButton.story.vue:
Error: Cannot find module /home/projects/vitejs-vite-cmhkz4/node_modules/@babel/runtime/helpers/esm imported from file:///home/projects/vitejs-vite-cmhkz4, file:///home/projects/, file:///home/projects/vitejs-vite-cmhkz4/_index.js, file:///home/projects/node_modules
at _resolve (file:///home/projects/vitejs-vite-cmhkz4/node_modules/mlly/dist/index.mjs:2155:19)
at resolveSync (file:///home/projects/vitejs-vite-cmhkz4/node_modules/mlly/dist/index.mjs:2164:10)
at resolvePathSync (file:///home/projects/vitejs-vite-cmhkz4/node_modules/mlly/dist/index.mjs:2174:24)
at resolvePath (file:///home/projects/vitejs-vite-cmhkz4/node_modules/mlly/dist/index.mjs:2178:28)
at Module.isValidNodeImport (file:///home/projects/vitejs-vite-cmhkz4/node_modules/mlly/dist/index.mjs:2638:30)
at _shouldExternalize (file:///home/projects/vitejs-vite-cmhkz4/node_modules/vite-node/dist/server.mjs:95:38)
at shouldExternalize (file:///home/projects/vitejs-vite-cmhkz4/node_modules/vite-node/dist/server.mjs:72:19)
at ViteNodeServer.shouldExternalize (file:///home/projects/vitejs-vite-cmhkz4/node_modules/vite-node/dist/server.mjs:242:12)
at ViteNodeServer._fetchModule (file:///home/projects/vitejs-vite-cmhkz4/node_modules/vite-node/dist/server.mjs:339:36)
at ViteNodeServer.fetchModule (file:///home/projects/vitejs-vite-cmhkz4/node_modules/vite-node/dist/server.mjs:278:14)
Collect stories end 21ms

- Error occurs with any Ant Design Vue components in my components or stories.
- Components work normally in standard Vite dev mode.
- Stackblitz sandbox from Histoire docs (with older Vite 4 dependencies) works fine.

A Stackblitz reproduction link is attached for reference.

### Reproduction

Stackblitz Sandbox (from vite.new/vue-ts with Vite 5)
https://stackblitz.com/edit/vitejs-vite-cmhkz4?file=src%2FMyButton.vue

### System Info

```shell
System:
OS: macOS 14.1
CPU: (8) arm64 Apple M1 Pro
Memory: 84.05 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.1 - ~/.local/state/fnm_multishells/47145_1733320207250/bin/node
Yarn: 1.22.22 - ~/.local/state/fnm_multishells/47145_1733320207250/bin/yarn
npm: 10.2.4 - ~/.local/state/fnm_multishells/47145_1733320207250/bin/npm
pnpm: 9.14.4 - ~/.local/state/fnm_multishells/47145_1733320207250/bin/pnpm
Browsers:
Chrome: 131.0.6778.87
Safari: 17.1
npmPackages:
ant-design-vue: ^4.2.6 => 4.2.6
@histoire/plugin-vue: ^0.17.17 => 0.17.17
@vitejs/plugin-vue: ^5.1.4 => 5.2.1
@vitejs/plugin-vue-jsx: ^4.0.1 => 4.1.1
histoire: ^0.17.17 => 0.17.17
vite: ^5.4.10 => 5.4.11
```

### 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] 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] Read the [docs](https://histoire.dev/guide/).
- [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

Research direction

Start with the Stackblitz reproduction and src/MyButton.story.vue, then follow the story-collection failure through the mlly and vite-node stack entries shown in the report. The work is done when Ant Design Vue components can be collected by Histoire without the missing @babel/runtime/helpers/esm error.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, typescript, vite
Domain
frontend, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.