Skip to content

@vitejs/plugin-react - Inconsistent vendor reference #5608

New issue
New issue
Closed
Closed
@vitejs/plugin-react - Inconsistent vendor reference#5608
Labels
has workaroundpending triage
@Pernick

Description

@Pernick
Pernick
opened on Nov 10, 2021

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

Activity

Pernick
added
pending triage
on Nov 10, 2021
Pernick
changed the title [-]Inconsistent vendor reference[/-] [+]@vitejs/plugin-react - Inconsistent vendor reference[/+] on Nov 10, 2021
beeequeue
mentioned this on Nov 11, 2021
Pernick

Pernick commented on Nov 17, 2021

@Pernick
Pernick
on Nov 17, 2021
Author

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

Niputi
added
plugin: react
on Nov 17, 2021
jonsherrard
mentioned this on Nov 26, 2021
nabc

nabc commented on Dec 5, 2021

@nabc
nabc
on Dec 5, 2021

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

Pernick commented on Dec 5, 2021

@Pernick
Pernick
on Dec 5, 2021
Author

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

nabc commented on Dec 5, 2021

@nabc
nabc
on Dec 5, 2021

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

nabc commented on Dec 5, 2021

@nabc
nabc
on Dec 5, 2021 · edited by 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

nabc commented on Dec 5, 2021

@nabc
nabc
on Dec 5, 2021

I've updated the sample repo

yann-combarnous

yann-combarnous commented on Dec 7, 2021

@yann-combarnous
yann-combarnous
on Dec 7, 2021 · edited by yann-combarnous

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

marcelrsoub

marcelrsoub commented on Dec 15, 2021

@marcelrsoub
marcelrsoub
on Dec 15, 2021

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

Shinigami92
added
has workaround
pending triage
and removed
pending triage
on Dec 15, 2021
benatshippabo

benatshippabo commented on Dec 29, 2021

@benatshippabo
benatshippabo
on Dec 29, 2021 · edited by benatshippabo
Contributor

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'

benatshippabo
mentioned this on Dec 30, 2021
Pernick

Pernick commented on Jan 10, 2022

@Pernick
Pernick
on Jan 10, 2022
Author

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.

Pernick
closed this as completedon Jan 10, 2022
Stephan-C
mentioned this on Jan 19, 2022
github-actions
locked and limited conversation to collaborators on Jan 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    has workaroundpending triage

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Niputi@Shinigami92@marcelrsoub@Pernick@nabc

        Issue actions
          @vitejs/plugin-react - Inconsistent vendor reference · Issue #5608 · vitejs/vite