histoire-dev / histoire-dev/histoire

Failed to use with Element-plus components library

Open
#790 2 comments 0 reactions 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

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:

![Image](https://github.com/user-attachments/assets/47c52a11-b409-4b0b-9429-9e87d83aaa16)

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

![Image](https://github.com/user-attachments/assets/9c940a7e-8cc6-4451-9b92-d77077cacda9)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.