histoire-dev / histoire-dev/histoire

Starting a project with only Histoire for Vue stories is not working

Open
#274 2 comments 7 reactions 0 assignees View on GitHub
documentation
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

I'm starting a new project, for testing stories on VueJS components with `histoire`.

By reading the guide here https://histoire.dev/guide/vue3/getting-started.html, and by installing `histoire` + `@histoire/plugin-vue`, adding a `histoire.config.js`, I was thinking it would be okay to create a new `meow.story.vue` file and see it in action in the UI.

That's not the case, I encounter the error `Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.` .

By thinking again, I install the `@vitejs/plugin-vue` package and add a `vite.config.ts` like this one :
```js
// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
plugins: [vue()],
}
```

And now, the story is visible.

Do you think it could be nice to add this in the getting started of vue3, by specifying that the vite config and the vitejs plugin need to be either already present or added ?

### Reproduction

* create a new folder
* init with `npm init`
* follow the getting started https://histoire.dev/guide/vue3/getting-started.html#installation
* `npm i -D histoire @histoire/plugin-vue`
* create the `histoire.config.js` file
* add the 3 scripts in `package.json` (see https://histoire.dev/guide/vue3/getting-started.html#command-line-interface)
* create a `meow.story.vue` (see https://histoire.dev/guide/vue3/stories.html#how-to-write-stories)
* run `npm run dev`

Then observe the error

```
Error while collecting story [...]/meow.story.vue:
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
```

### System Info

```shell
System:
OS: Linux 5.15 Linux Mint 20.3 (Una)
CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
Memory: 1.27 GB / 7.67 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
Browsers:
Brave Browser: 84.1.11.104
Firefox: 103.0.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 with the Vue 3 getting-started page linked in the issue, then verify the minimal npm reproduction and its vite.config.js setup. Update the installation guidance to state that @vitejs/plugin-vue and the Vite configuration must already be present or added, and confirm the documented steps make meow.story.vue load without the parse error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, vite
Domain
documentation
Issue type
Documentation
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.