[React] bug: React is not defined in production build with Vite 3

[pantajoe]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.6

What browser are you using?

Chrome 103.0.5060.114

Reproduction URL

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

1. Run yarn install to install dependencies.
2. Run yarn dev to see everything is working.
3. Build with yarn build
4. Run production build with yarn serve (see error: React is not defined)

Describe your issue

Hello there 👋🏼
I love using headlessUI and I recently switched from CRA to Vite. 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:

headlessui/packages/@headlessui-react/src/components/disclosure/disclosure.tsx

Line 171 in e819c0a

props.as === React.Fragment

After building my project with yarn build and when somwhere importing 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.
In the node_modules, I manually changed the equality check to by props.as === Fragment since Fragment is also directly imported in the file and this worked without any problem.

I'm not sure how this comes to be, but since it's an easy and non-breaking fix, I would really appreciate this fix for Vite 3!

Thanks for reading and maintaining!

[vedmakk]

I ran into the same issue. As a workaround for now, I disabled the "automatic JSX Runtime" in vite.config.ts by setting the jsxRuntime to classic:

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxRuntime: 'classic',
    }),
  ],
})

[pantajoe]

Thanks for the hint! While this seems to work, it's odd that the automatic JSX Runtime does not work with Vite.3 anymore.
I opened an issue in the vitejs repository as it is likely a bug.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This doesn't seem like a Headless UI issue and it seems that the workaround provided by @protyze works!

If you are running into this issue, check out this comment: #1693 (comment)