Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

is it possible to run two different versions of ReactJS on the same page?

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

like image 773
ivan Avatar asked Aug 05 '16 07:08

ivan


People also ask

Can I use multiple React versions?

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.

Are React websites single page?

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.

How do I fix two versions of React?

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).


1 Answers

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:

  • Embeddable JavaScript widget with React
like image 131
Grokify Avatar answered Oct 23 '22 05:10

Grokify