How does a React project resolve React dependencies? - reactjs

Usually when I try a React package from GitHub, I never bother checking the React version that the packages is using. I'm curious now; does it actually matter? Will there be any conflict between dependencies?
Let's say there is a React package, packageA, that is using React v16.8 while my React project is still using version15. It's a huge leap. Will there be an issue whereby packageA is using some advance feature which is not supported by my project? Or will this simply not happen because everything is handled nicely by BabelJS?

Related

Using ThreeJS with React v16

I am trying to render 3D files in my react project. I am using ThreeJS for my react project of version 16.13.1. After installing #react-three/fiber & #react-three/drei these packages, I am getting error of Module not found: Can't resolve 'react-dom/client'. After searching solution for this I get to know that for these we have to upgrade React version to 17 or above. I did it in demo project & it worked. But the restriction is that I can not update actual project version from 16 to 18 as it will change or break so many things as well as I have to take care of other dependencies. Is there any solution available for using ThreeJS with React v16.
Or if there is any other way or different packages available to render 3D files (like .glb, .gltf) please share with me.
Thank you in advance.
How to find a version of a library that supports particular version of react?
Google <library-name> npm
Go to npm page
Go to repository (usually github)
Open package.json
Check version of react; if it's matching your version go to 7.
Change tag to some previous version; go to 5.
#react-three/fiber & #react-three/drei for react 16.13.1
These two should work:
#react-three/fiber 4.2.21
#react-three/drei 3.2.0
npm install #react-three/fiber#4.2.21 #react-three/drei#3.2.0
Disclaimer
You can never know if the packages work without trying. Many things changes and bug fixes only apply to the newest versions.
I found one package react-3d-viewer to render 3D files which perfectly work for me.
Google model viewer also works and it comes with variety of props which is good for customization of rendered 3D model.
https://github.com/dwqdaiwenqi/react-3d-viewer
https://modelviewer.dev/docs/index.html

Alternatives of nwb in react components

I have a react applications which is very old and configured manualy. I have used nwb packages for building and publishing the packages. nwb seems to produce lots of vulnerabilities and that's why I would like to remove and replace with some other suitable packages.I have searched and found CRA( create-react-app) but as my existing projects already becomes larger, installing the create-react-app and moving the components might not be a good idea. Does anybody have any recommendations or ideas how to replace nwb to existing react applications.

Using Nextjs components in a package consumed by a nextjs application

I have a Nextjs website that consumes a package with a set of react components. This package has nextjs installed too but its extremely heavy and only used for next links. I am working on removing nextjs from the package.
Is there a way I can use the next link component in the package without adding next as a dependency. It seems strange to add it in both. I would like to know the recommended approach.
Thanks
This shouldn't be an issue. Nextjs should only get installed once. All new installations with override any previous installation. To avoid conflicts, just make sure your project and package have the same versions of react.

Use React npm library that uses Context API in a pre-hooks version of React

I created and published an npm library. The library uses React.createContext().
I then created a demo react App using (an older, on purpose) react version 16.0.0 and react-dom version 16.0.0
When I run the application i get the error described here:
How to use new Feature Hooks in React?
Given that I own the library, is there a way to build/compile it in such a way that it's backwards compatible with older pre-context-api versions of react? I'd like this new npm library to be compatible with older react versions.
Thanks
It is not possible. A react application can only use a single version of react and that is the one that you use in your project. Libraries for react should only have react as a peer dependency. That means the project using it is responsible for providing the minimal version. You can't and shouldn't bundle react in a library that is intended to be used by other projects, especially not a different version.
So in other words: If you want to use the library in your project, you need to upgrade react to ≥16.3.0.

How can I specify different versions of react in my react/react-native repo

Two questions.
I currently have a react web app, using higher order components, and redux to manage state. I am using react version 15.6.1.
I am now looking to create a react-native project. Since I am planning to integrate the react-native and the react codebase into the same repo, I am trying to figure out the best way to do this, specifically regarding the version of react.
The latest version of react-native (0.53rc0) has a peer dependency on react 16.2.0.
The react app breaks when I tried to upgrade to react v16 and I don't have time to do those fixes at this stage, so I am stuck with react 15.6.1 for a while longer. Does this mean I have to use an older version of react-native (looks like 0.42 supports react v15), or is there some other way in which I can use the latest version of react for react-native only, while keeping it in the same repo.
To clarify - the reason I want to keep it in the same repo, is because I already have higher order components, so in theory I just have to write the react-native components which will to my understanding then be called by the higher order component when running in the mobile app.
If anyone has or knows of examples of repos on github where this has been done (combined react and react-native project), that would be great so that I can get an idea of what such a project would look like once done.

Resources