@vitejs/plugin-react - Inconsistent vendor reference

[Pernick]

Describe the bug

When using @vitejs/react-plugin with react-custom-scrollbars-2 (but other packages have similar issues - can be found here: alloc/vite-react-jsx#10), reference to react is not transformed in all locations the same way.

react-custom-scrollbars-2 imports react utility functions:
import { Component, createElement, cloneElement } from 'react';
https://github.com/RobPethick/react-custom-scrollbars-2/blob/master/src/Scrollbars/index.js#L3

In the library output, it looks like this (emphasis on the _react.:

return (0, _react.createElement)(tagName, _extends({}, props, { style: containerStyle, ref: function ref(_ref3) {
                    _this7.container = _ref3;
                } }), [(0, _react.cloneElement)(renderView({ style: viewStyle }), { key: 'view', ref: function ref(_ref4) {
                    _this7.view = _ref4;
                } }, children), (0, _react.cloneElement)(renderTrackHorizontal({ style: trackHorizontalStyle }), { key: 'trackHorizontal', ref: function ref(_ref5) {
                    _this7.trackHorizontal = _ref5;
                } }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.thumbHorizontalStyleDefault }), { ref: function ref(_ref6) {
                    _this7.thumbHorizontal = _ref6;
                } })), (0, _react.cloneElement)(renderTrackVertical({ style: trackVerticalStyle }), { key: 'trackVertical', ref: function ref(_ref7) {
                    _this7.trackVertical = _ref7;
                } }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.thumbVerticalStyleDefault }), { ref: function ref(_ref8) {
                    _this7.thumbVertical = _ref8;
                } }))]);

But after vite build it is changed to:

var _react3 = react.exports;

return (0, React.createElement)(tagName, _extends2({}, props, {
          style: containerStyle,
          ref: function ref(_ref3) {
            _this7.container = _ref3;
          }
        }), [(0, _react3.cloneElement)(renderView({
          style: viewStyle
        }), {
          key: "view",
          ref: function ref(_ref4) {
            _this7.view = _ref4;
          }
        }, children), (0, _react3.cloneElement)(renderTrackHorizontal({
          style: trackHorizontalStyle
        }), {
          key: "trackHorizontal",
          ref: function ref(_ref5) {
            _this7.trackHorizontal = _ref5;
          }
        }, (0, _react3.cloneElement)(renderThumbHorizontal({
          style: _styles.thumbHorizontalStyleDefault
        }), {
          ref: function ref(_ref6) {
            _this7.thumbHorizontal = _ref6;
          }
        })), (0, _react3.cloneElement)(renderTrackVertical({
          style: trackVerticalStyle
        }), {
          key: "trackVertical",
          ref: function ref(_ref7) {
            _this7.trackVertical = _ref7;
          }
        }, (0, _react3.cloneElement)(renderThumbVertical({
          style: _styles.thumbVerticalStyleDefault
        }), {
          ref: function ref(_ref8) {
            _this7.thumbVertical = _ref8;
          }
        }))]);

Every occurence but one is using the _react3 variable, only React.createElement is remaining - which leads to Uncaught ReferenceError: React is not defined.

Reproduction

1. Clone this repository
2. Install dependencies yarn
3. Build yarn run build
4. Serve yarn run serve
5. Open the page in browser

This does not happen in dev mode. The test repo is using manual chunks, but I have not found any important difference when using them differently/not using them at all.

System Info

System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 78.02 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 93.1.29.81
    Chrome: 95.0.4638.69
    Firefox: 88.0.1
    Safari: 14.1.1
  npmPackages:
    @vitejs/plugin-react: ^1.0.0 => 1.0.8
    vite: ^2.6.4 => 2.6.14

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.

[Pernick]

Issue #5642 describing similar problem mentions updating to 1.0.9 helps. Sadly I can not confirm this - updated reproduction repo as well.

[nabc]

I'm getting Uncaught ReferenceError: React is not defined. error using material-ui pickers in production mode, I've created a minimal repo
I've tested both 1.0.7 and 1.0.9 version mentioned in #5642 and it did NOT solve the problem,is there any solution?

[Pernick]

Even with newer 1.1.0 I have not had any luck. Will report back if I discover something. This issue prevails in every one of my apps when using react-custom-scrollbars. The simplest solution for me is not to use it. That probably wouldn't work for you.

[nabc]

No it would not! I'm trying anything that comes in my mind, ranged from upgrading material-ui-picker library to using rollup or commonJs options to transform the code, or suppress the issue. So far nothing worked.

[nabc]

It worked at last!!
I honestly don't know which step made it work:
1- first I removed react plugin from @vitejs/plugin-react in production mode :
plugins: mode === "development" ? [react({}), ...pluginsArray] : pluginsArray,

2- then I added an alias for @material-ui/pickers to use esm :

{
    find: /^@material-ui\/pickers\/(.*)/,
    replacement: "@material-ui/pickers/esm/$1",
},

3- then added jsxInject: "import * as React from 'react'", to esbuild option,

4- and finally added globals to build => rollupOptions => output => globals :

globals: {
    react: "React",
    "react-dom": "ReactDOM",
},

and the error is gone!

[nabc]

I've updated the sample repo

[yann-combarnous]

Confirmed same issue ("React is not defined") for @material-ui/pickers using plugin-react 1.1.0 in production builds.

[marcelrsoub]

@nabc's solution worked for me! What worked here was the 2nd step

[benatshippabo]

Can confirm that the issue still persists on 1.1.3, step 2 of @nabc's solution doesn't appear to work for me 😭 . The only thing that worked was disabling the react plugin when in production mode as in step 1 of @nabc's solution.

edit: we can also just pass jsxRuntime: 'classic' to the react plugin options as well

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

Lines 24 to 28 in 8bdb184

	/**
	* Set this to `"automatic"` to use [vite-react-jsx](https://github.com/alloc/vite-react-jsx).
	* @default "automatic"
	*/
	jsxRuntime?: 'classic' | 'automatic'

[Pernick]

I tried the react-custom-scrollbars with jsxRuntime: 'classic' and the other proposed solutions, none of them seems to work for me.

But as most people here resolved their problem with one of the provided solutions and I replaced the react-custom-scrollbars package in my apps, I am closing this issue.