plugin-react: React default import in node_modules results to React is not defined

[pantajoe]

Describe the bug

I am using React with Vite 3 and @vitejs/plugin-react together with @headlessui/react.

It worked fine with Vite 2.x, and a few days ago Vite 3 was released together with a new plugin for React. However, it seems to me as if the equality check in the Disclosure component against React.Fragment results in vite bungling something upon building:

https://github.com/tailwindlabs/headlessui/blob/e819c0a7b2e2aa6de32866ea956174d2e90f2219/packages/%40headlessui-react/src/components/disclosure/disclosure.tsx#L171

After building my project with yarn build and when somewhere importing import { Disclosure } from '@headlessui/react' , I get the following error as soon as I start the production build with yarn serve:

Reference Error: React is not defined

And the stacktrace directly points to the equality check of the as prop with React.Fragment.

If you look at the import statements here, you see that Fragment is imported from react while the default export of react is also imported as React. In the production build the usage of Fragment seems to be fine while React.Fragment is not transformed properly to point to the minified variable name of React.

I also opened an issue in the headlessui repo, but I assume that this is a bug of Vite since Vite < 3 works without any problems with @headlessui/react.

However, using the react plugin with react({ jsxRuntime: 'classic' }) instead of automatic seems to work.

Reproduction

https://github.com/pantajoe/headless-ui-vite-disclosure-error

System Info

System:
  OS: macOS 12.4
  CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Memory: 207.09 MB / 16.00 GB
  Shell: 3.3.1 - /usr/local/bin/fish
Binaries:
  Node: 16.16.0 - ~/.asdf/installs/nodejs/16.16.0/bin/node
  Yarn: 1.22.19 - ~/.asdf/installs/nodejs/16.16.0/.npm/bin/yarn
  npm: 8.11.0 - ~/.asdf/plugins/nodejs/shims/npm
Browsers:
  Chrome: 103.0.5060.134
  Firefox: 102.0.1
  Safari: 15.5
npmPackages:
  @vitejs/plugin-react: ^2.0.0 => 2.0.0 
  vite: ^3.0.3 => 3.0.3

Used Package Manager

yarn

Logs

Click to expand!

Uncaught ReferenceError: React is not defined
    at disclosure.js:1:2208
    at Lu (react-dom.production.min.js:167:137)
    at Xi (react-dom.production.min.js:193:57)
    at kc (react-dom.production.min.js:294:275)
    at gc (react-dom.production.min.js:280:389)
    at jd (react-dom.production.min.js:280:320)
    at ol (react-dom.production.min.js:280:180)
    at Go (react-dom.production.min.js:271:88)
    at hc (react-dom.production.min.js:268:429)
    at E (scheduler.production.min.js:13:203)

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