You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
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/core instead.
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:
Another of the transitive dependencies may use something like the following (in the example react-transitive-lib-1):
Which in combination when creating the final build of the library it gets bundled as:
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
Used Package Manager
yarn
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: