histoire-dev / histoire-dev/histoire
Failed to use with Element-plus components library
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
Can't launch Histoire page without errors, when using element-plus visual component library. Tried no setupFile / with setupFile, no auto import components / with auto-import components.
### Reproduction
Create empty vue app with `npm create vue@latest`, add element-plus, add histoire, minimal config element-plus (see `src/main.ts`: add .css and `app.use(ElementPlus)`) as described [here](https://element-plus.org/en-US/guide/quickstart.html).
1) Config Histoire (src/histoire.setup.ts) to use element-plus (same things as in main.ts).
1.1) When [Element-plus auto import](https://element-plus.org/en-US/guide/quickstart.html#auto-import-recommend) (in vite.config.ts) is OFF, get this error in browser console:

1.2) When auto import is ON, and explicitly importing component into story (src/components/First.story.vue) get error in shell:

2) When no setupFile is pointed in histoire.config.ts and no auto-import used, get same error as in 1.1
### System Info
```shell
Windows 10, node 20.11.1, element-plus 2.9.10, histoire 1.0.0-alpha.2
```
### 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
Research direction
Start by running the minimal Vue app described in the issue and compare the setup in src/main.ts with src/histoire.setup.ts. Inspect vite.config.ts, src/components/First.story.vue, and histoire.config.ts across the setup-file and auto-import cases. Done means the Histoire page launches without the reported browser or shell errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100