[plugin-react] Plugin does not convert React.createElement to JSX Runtime when name is an expression

[GlacialBoy]

Describe the bug

I'm bundling a library from one repo (ES module) with Vite and importing it in another repo handled by Vite.
We have several external dependencies in this project.

In the bundled library code there are pieces of code where the React.createElement have component name in variables with lower case name and expressions, like:

React.createElement(render4.component, __spreadProps(__spreadValues({}, render4.props))
React.createElement(this.props.pointer, this.props)
React.createElement(_default$1, {})

When I used the library executing vite build those expressions are not converted to _jsx, launching an error in production, "React is undefined"

After an investigation I noticed the 3 cases above are not recognised as valid “React.createElement” snippet because the check at this line fails:

https://github.com/vitejs/vite/blob/274c10eb9e9451620981da808e143bc50b8c2a38/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.ts#L157

When this check fails the snippet is not replaced in the original code.

Another related issue is that when we have some React aliases and the aliases are used to execute createElement (for example rollup define “React__default” when in the same file there are multiple name conflicts ) the lines: 


https://github.com/vitejs/vite/blob/274c10eb9e9451620981da808e143bc50b8c2a38/packages/plugin-react/src/jsx-runtime/restore-jsx.ts#L33-L36

Is going to replace the alias with React, 
If then the check of a valid React.createElement fails (issue above) then the plugin is not going to replace back the alias, adding in the chunk code a reference to a variable (React) that doesn’t exists.



So the issues:

• There are limitations in the way that the Plugin can recognise the React.createElement snippet and that can be problematic in project with many 3rd party dependencies
• When React has aliases and they are used with “createElement” if the plugin does not recognise the “React.createElement” snippet then the aliases are not replaced back


Thanks for your great work! 🎉

Reproduction

https://github.com/GlacialBoy/vite-createElement-error

System Info

System:
    OS: macOS 11.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 638.48 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: 2021.10.11.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 99.0.1
    Safari: 14.1
  npmPackages:
    @vitejs/plugin-react: ^1.3.0 => 1.3.1 
    vite: ^2.9.6 => 2.9.6

Used Package Manager

npm

Logs

No response

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.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[GlacialBoy]

This PR vitejs/vite#6838 ( vitejs/vite#6537 ) is partially solving this problem, but not completely.
I run the reproduction example project on Vite 2.9.7 and Vite React Plugin 1.3.2 and I still see React.createElement code that has not been replaced back with the alias.
For example:
React.createElement(_default$3, { src: svgSource });

[senmu-a]

This screenshot is a code fragment after the third-party dependency is packaged. After the video-plugin-react processing, the _react is changed to React. And then it caused React is not defined.

[JCMais]

Did anyone find any workaround for this?

[sapphi-red]

Closing as restoreJSX was removed by vitejs/vite#9590.