@vitejs/[email protected]: ReferenceError: React is not defined when rendering a Dialog-component from @mui/material

[glennbarosen]

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.

[github-actions]

Hello @glennbarosen. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[Niputi]

use a github repository if you can't repro against stackblitz

[bstro]

I experienced the same error in production builds only. Downgrading to @vitejs/[email protected] got things working again for me.

[glennbarosen]

The issue seems to related to a custom MuiDialog from our component library. I will try to reproduce the problem.

[glennbarosen]

I have updated the issue with repro on stackblitz, although the issue does not seem to happen when running npm run serve on StackBlitz. Are there any known differences in running locally vs. on StackBlitz?

[smashercosmo]

Same issue in our app. ReferenceError: React is not defined with 1.1.4 when running npm run serve. Works with 1.1.3. If it's not something obvious I'll try to come up with repro.

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

[Stephan-C]

This might be related to alloc/vite-react-jsx#10 and #5608

[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:

vite/packages/plugin-react/src/index.ts

Line 192 in e6495f0

(isProduction ? '' : '-development')

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

[Stephan-C]

Hmm, so looking at other discussions of similar issues, just a hunch but I think it might be when a library explicitly uses React.createElement or anything else on React but the plugin doesn't catch all of those to transform to the new way (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html ), then some of those React.createElement remains in the build, but no import React is injected for those special ones. Hence failing with React is not defined.

The plugin is supposed to transform all the cases, according to the README of the plugin that was merged into the current plugin: https://github.com/alloc/vite-react-jsx

Using the older @vitejs/plugin-react-refresh plugin that doesn't do the new transforms, works for me if I inject an React import (if you don't add it in components yourself)

defineConfig({
  plugins: [reactRefresh()],
    esbuild: {
    jsxInject: `import React from 'react'`,
  })

[mquandalle]

I have the same issue in production mode and I can confirm than downgrading @vitejs/plugin-react to 1.1.3 fixes the issue.