Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] React.jsx: type is invalid #488

Open
1 task
emosheeep opened this issue Aug 26, 2022 · 11 comments
Open
1 task

[Bug] React.jsx: type is invalid #488

emosheeep opened this issue Aug 26, 2022 · 11 comments
Labels
bug Something isn't working

Comments

@emosheeep
Copy link

emosheeep commented Aug 26, 2022

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.
imagethe 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.

detail

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 emosheeep added the bug Something isn't working label Aug 26, 2022
@emosheeep
Copy link
Author

problem lines are as under:
#377 (comment)

@IanVS
Copy link
Member

IanVS commented Aug 30, 2022

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
Copy link
Author

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

@IanVS
Copy link
Member

IanVS commented Aug 30, 2022

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
Copy link
Author

Is there any progress on this problem?😋

@IanVS
Copy link
Member

IanVS commented Aug 31, 2022

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
Copy link
Author

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

@emosheeep
Copy link
Author

@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
Copy link
Author

emosheeep commented Sep 28, 2022

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
Copy link
Member

IanVS commented Sep 28, 2022

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants