Hello everyone I am wondering if is possible to run two version of ReactJS on the same page , something similar to jQuery.noConflict()
.
With a bit of research i have found two interesting things :
Two Reacts Won’t Be Friends
While I’m happy that everybody seems to be converging on NPM in 2015 and NPM wants developers to use it for managing front-end dependencies, it still has rough edges. The biggest problem with using NPM for front-end dependencies is that if two packages specify a library like React as a dependency, they might get two separate copies of React. Even worse, they might get different versions of it. This works fine for something like Node, but not for browser libraries that want to mess with the same global mutable DOM! NPM tried to solve this with peerDependencies but all hell broke loose and they’re backing out.
https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#.hfx35f6hl
And an issue on github: https://github.com/facebook/react/issues/1939
However is not clear for me how we could wrap & delivery our ReactJS widgets in order they could run without conflicts on a page using other version of ReactJS .
thanks
You can try to place react in both peerDependencies and devDependencies. Placing it in dependencies (without peer or dev) will cause multiple versions of React to be installed.
React is great for single page applications because it allows developers to create applications that are mobile first and responsive. React allows developers to create applications that are fast and easy to update, which is great for mobile applications.
So the simple solution to the You might have more than one copy of React in the same app error is to add rules into the bundler's config (webpack discussed here but similar approaches are available for other bundlers such as Snowpack, rollup. js or Parcel).
However is not clear for me how we could wrap & delivery our ReactJS widgets in order they could run without conflicts on a page using other version of ReactJS.
You can use Browserify with reactify to load your JS and version of ReactJS without conflicting with another ReactJS version that may be loaded on the page.
More information is available here:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With