`@vitejs/plugin-react@1.1.4`: `ReferenceError: React is not defined` when rendering a Dialog-component from `@mui/material`

Describe the bug

When rendering a page containing a Dialog component from @mui/material while using @vitejs/plugin-react version 1.1.4, the app crashes with error message ReferenceError: React is not defined. It seems to be related to the bug fix regarding React.createElement in the latest release.

When switching version to 1.1.3 everything works as expected. Unfortunately, I was not able create an isolated reproduction of the error in StackBlitz. To reproduce, render a MuiDialog in an app using @vitejs/plugin-react version 1.1.4. The issue is only occuring in production builds, not dev environment.

Reproduction

StackBlitz repro

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 1.13 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.17 - ~/Dev/naeva/home/node_modules/.bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Firefox: 85.0.2
    Safari: 15.1
  npmPackages:
    @vitejs/plugin-react: 1.1.4 => 1.1.4 
    vite: ^2.6.4 => 2.7.12

Used Package Manager

yarn

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/vue-next 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.

[yonathan06]

Happened to me as well, but only when running vite build without a --mode option When ran vite build --mode staging for example the transformation works fine I believe is something with a different production bundling/transformation logic, but no sure what

My guess it is because of this line: https://github.com/vitejs/vite/blob/e6495f0a52c9bd2cae166934dc965f8955ce035d/packages/plugin-react/src/index.ts#L192

@babel/plugin-transform-react-jsx-development works better with a certain config, and @babel/plugin-transform-react-jsx fails

[glennbarosen]

I’m in way over my head when it comes to this stuff, but my best(and only) bet is that the changes in (ce65c56) broke the way Vite handles our compiled MuiDialog from our component library. Related PR: (#6110)

Since the issue does not happen in the repro above, I am guessing that it is a conflict between babel/vite since we are using babel in our library.