[Bug] React.jsx: type is invalid

[emosheeep]

Describe the Bug

Sorry for bothering, but i just found an inevitable exception when i start my vue3 project without using any mdx file with @storybook/[email protected] or laster.
the web page crashed due to this problem, which was fixed by adding some lines in main.js:

async viteFinal(config) {
  // ignore react plugins
  config.plugins = config.plugins.flat().filter(p => !p.name.includes('react'))
  return config
}

i didn't use any features about mdx. but I need to ignore the react plugins, which confused me.

Link to Minimal Reproducible Example

I've made the reproduction with codesanbox at storybook-bug-reproduce, you can check for more info. After the demo's lanuching, you'll find something wrong as below in console.

What version of vite are you using?

^3.1.0(latest)

System info and storybook versions

System:
OS: macOS 12.5.1
CPU: (8) arm64 Apple M1
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.19 - ~/.pnpm/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Browsers:
Chrome: 104.0.5112.101
Safari: 15.6.1
npmPackages:
@storybook/addon-actions: ^6.5.10 => 6.5.10
@storybook/addon-backgrounds: ^6.5.10 => 6.5.10
@storybook/addon-docs: ^6.5.10 => 6.5.10
@storybook/addon-essentials: ^6.5.10 => 6.5.10
@storybook/addon-links: ^6.5.10 => 6.5.10
@storybook/addon-measure: ^6.5.10 => 6.5.10
@storybook/addon-outline: ^6.5.10 => 6.5.10
@storybook/builder-vite: ^0.2.2 => 0.1.36
@storybook/client-api: ^6.5.10 => 6.5.10
@storybook/client-logger: ^6.5.10 => 6.5.10
@storybook/core-common: ^6.5.10 => 6.5.10
@storybook/node-logger: ^6.5.10 => 6.5.10
@storybook/vue3: ^6.5.10 => 6.5.10

Participation

• I am willing to submit a pull request for this issue.

[emosheeep]

problem lines are as under:
#377 (comment)

[IanVS]

This seems to be a bug in the vite react plugin. It is only supposed to apply to .mjs, .ts(x), and .js(x) files. In your case, it looks like the query parameter is being used as the file extension, instead of the actual file extension of .vue. They do specifically look at the query param though, so I'm not clear whether it's a bug or something unintended.

Any chance you could create and share a minimal reproduction that we can use to troubleshoot this?

[emosheeep]

Of course. I tried to create a demo with codesandbox， but I failed， I'll try it again later with some other ways

[IanVS]

Thanks! Sometimes it's easiest to create a new vite project with npm create vite@latest, and then add storybook with npx sb@next init. Then when you've got it reproducing the issue, push the repo up to github.

[emosheeep]

Is there any progress on this problem?😋

[IanVS]

No, I haven't had a chance to dig into it yet, but it's on my radar. I'll post back here when I figure something out.

It sounds like you're not blocked, since you were able to work around it in your viteFinal, right?

[emosheeep]

it’s okay, i’m not in a hurry. For now, my project runs well by excluding the react plugin.

[emosheeep]

@IanVS 😄 I made some updates about the meta info of this issue, tried and succeeded to add an online example with codesandbox, which you can easily get start. Please scroll to the top of the page and see the description of the issue.

[emosheeep]

I saw this issue #469 closed and there was some related commits has been merged, I wonder if this issue could be resolved? Seems that this problem is also related to the compatibility and some people around encountered too.

[IanVS]

The issue is that we're using the react plugin for mdx, but that conflicts with vue files written in jsx/tsx. I think we need to find a different way to handle mdx. In 7.0 I think this will be solved by the upgrade to mdx2. Unfortunately I don't think the vue2 PR you mention helped this situation.

[emosheeep]

Well, I got it. It seems that we have to make some choices on this. Looking forward to 7.0😄