Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React build issue edge case #7640

Closed
7 tasks done
js2702 opened this issue Apr 7, 2022 · 2 comments
Closed
7 tasks done

React build issue edge case #7640

js2702 opened this issue Apr 7, 2022 · 2 comments

Comments

@js2702
Copy link

js2702 commented Apr 7, 2022

Describe the bug

When building an application with Vite that uses a React external library we've encountered with a very strange issue that we think it's related to the tree shacking or bundling that Vite uses. Webpack works with the same library.
We've created a minimal reproduction example.

The issue happens when one of the transitive libraries of the main React library creates a variable named React (In the example in the library react-transitive-lib-2). This can happen in certain libraries that are CommonJS.
For example this CommonJS library code that is autogenerated:

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));

Another of the transitive dependencies may use something like the following (in the example react-transitive-lib-1):

import React from 'react';
console.log(React.version);

Which in combination when creating the final build of the library it gets bundled as:

import * as React$1 from 'react';
import React__default, { useEffect } from 'react';

If after those imports some code uses React__default.createElement the browser returns that React is undefined.
The interesting thing is that if React__default is manually renamed in the bundle to React$1__default it works ok.
Another interesting thing is that createElement is the only property of React that fails when accessing it. If one does React__default.{some_property} it works fine.

We've tried to reproduce it in a minimal example what happens when using a combination of React libraries.

So when using this React library in the Vite React scaffolding app it just breaks. If we use the same library in a create-react-app it works fine.

Is this an error with Vite? Rollup? Esbuild?

Reproduction

Clone the code and follow the readme

System Info

System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
    Memory: 3.32 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.8.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 100.1.37.111
    Chrome: 100.0.4896.75
    Firefox: 98.0.2
    Safari: 15.4

Used Package Manager

yarn

Logs

No response

Validations

@underfisk
Copy link

I've had the same issue with ag-grid where in the end I had to replace the rollup ag-grid package using the minified js version

@sapphi-red
Copy link
Member

Closing as I confirmed upgrading plugin-react to 1.3.2 fixed this through #6838.

@github-actions github-actions bot locked and limited conversation to collaborators May 21, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants