histoire: Histoire fails with Nuxt 3.3.3, requires @vitejs/plugin-vue to handle .vue files

Describe the bug

Updating from Nuxt 3.3.2 to 3.3.3 gives me the following error now:

Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

Reproduction

Issue is obvious after upgrading from Nuxt 3.3.2 to Nuxt 3.3.3.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.10 22.10 (Kinetic Kudu)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700T
    Memory: 27.45 GB / 31.19 GB
    Container: Yes
    Shell: 5.2.2 - /bin/bash
  Binaries:
    Node: 18.15.0 - /usr/bin/node
    Yarn: 3.5.0 - /usr/bin/yarn
    npm: 9.5.0 - /usr/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
  npmPackages:
    @histoire/plugin-nuxt: ^0.15.9 => 0.15.9 
    @histoire/plugin-vue: ^0.15.8 => 0.15.8 
    histoire: ^0.15.9 => 0.15.9

Used Package Manager

yarn

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussion.
The provided reproduction is a minimal reproducible example of the bug.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 4
Comments: 16 (1 by maintainers)

Most upvoted comments

@Akryum This is likely an issue with upgrade to Vite 4.2 under the hood. You may need to set enforce: 'post' if you need to ensure that the Vite Vue plugin has already run.

danielroe on Apr 10, 2023

I have the same problem as the poster above, installing Histoire on an existing svelte/vite project and pointing it to a new Meow.story.svelte file with the TS example code from the docs leads to:

Error while collecting story 
/blah/src/components/Meow.story.svelte:
Error: Failed to parse source for import analysis because the content contains invalid JS syntax.
If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

espy on Apr 25, 2023

I also have that issue with just a template in the story file, while having vite and the plugin installed actually

hinogi on Nov 2, 2023

Same issue here with @histoire/plugin-vue2 on a fresh vue2 project.

Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

halimb on Sep 1, 2023

I’m having the same problem with a project scaffolded with npm create vite@latest using Svelte as the template. No Nuxt, no Vue, nothing unusual. Makes me think this is not only Nuxt/Vue related? The template includes a component for a button to +1, Counter.svelte, very simple so no errors, and Histoire cannot find it.
The story file is simple, looks like this:

<svelte:options tag="cobalt-counter-hst" />
<script>
    import Counter from './Counter.svelte';
    export let Hst;
  </script>
  
  <Hst.Story title="Counter">
    <Counter />
  </Hst.Story>

Histoire itself opens on localhost with the sidebar etc, just can’t collect any stories?

Ubuntu 22.10 LTS npm: ‘9.6.2’, node: ‘18.16.0’,

ctp-placebo on Apr 14, 2023

@Akryum - no change with 0.16.0

kylemilloy on Apr 12, 2023