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

mdartic commented 2 years ago

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 :

// 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

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
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue 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.
[X] The provided reproduction is a minimal reproducible example of the bug.

khaledOghli commented 1 year ago

you found any solution?

hybridwebdev commented 3 months ago

// vite.config.js
import vue from '@vitejs/plugin-vue'

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

Anyone coming here using webpack and vue3 and looking for a solution, this solved the issue for me. Simply put vite.config.js in same directory as your package.json / vue.config.js directory with this and it'll solve the issue.

Sure would be nice if this was in the documents, or at least addressed by Akryum instead of being ignored.

Edit You can also dump it directly into your histoire.config.js file as well to save on having an extra file cluttering up your project folder.

import { defineConfig } from 'histoire'
import { HstVue } from '@histoire/plugin-vue'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
    plugins: [
        HstVue(),
    ],
    vite: {
        plugins: [
            vue()
        ]
    }
})

@Akryum is there any possibility of having the documents updated to reflect this solution, given how many open issues there are pertaining to this?

histoire-dev / histoire