Using Nextjs components in a package consumed by a nextjs application - reactjs

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.

Related

Can I use React components from npm in an existing web page w/o create-react-app?

I know that in React you can add components to any existing page from this excellent documentation (https://reactjs.org/docs/add-react-to-a-website.html). However, in that example the component is built from scratch. I am building several of my own components from scratch too but I would like to use a few different components from npm as well. For example, there is one called react-ace (https://www.npmjs.com/package/react-ace).
If a component is published on npm (and available on unpkg.com) is it possible to add it to an existing page like in the React docs example above? I have tried adding a script tag with this as the source: https://unpkg.com/react-ace#9.4.1/dist/react-ace.js/main.js but that does not make the AceEditor available. Or, do components have to be processed somehow in order to use them?
Note: I am also exploring using create-react-app to build and share the app and I may end up doing that but I want to know if any npm React component can be used in an existing page and if so how?

How does a React project resolve React dependencies?

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?

How to I update my React version in the ASP.NET Core React/Redux template project?

I've started learning React with Redux and part of my development has seen me want to use the Material UI to make my application more interesting. I created my project in Visual Studio 2017 using the React with Redux template for ASP.NET Core.
I followed the documentation presented at the MatrialUI site and opted to use the CDN option for delivery of the MaterialUI library.
I started creating a few elements and was quickly confronted with the message that I needed to upgrade my react installation to use the Toolbar.
My question is, when we use the Visual Studio React/Redux ASP.NET Core template, how do I update my react installation? Is that carried out via NPM? I can't see any nuget packages relating to React.
Many thanks
Hey not sure if you found an answer yet but here is my take:
I tried using npm update inside the "ClientApp" folder, but that didn't seem to work. Something that did work though was manually updating each package. So open up a separate terminal -> cd into the ClientApp directory and then
npm i <package name>#<newest version>
so an example would be
npm i react#16.8.6
Some packages you will definitely need to update are React, React-DOM and rimraf. But you might choose to just update all of them while you're at it. When you're using ASP.NET Core try and go for the 2.2 version, which at least already has Bootstrap 4 installed.
Another tip: With Visual Studio, if you hover over the package names in the package.json file inside, it will show you the latest version. That's gonna make it a bit easier to find out what version you want to update to.
Hope that helped! And if anyone has a better solution please let me know.

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.

Can i use more than one reactjs version in one website?

I am doing plugin using Reactjs. This plugin is easy to pluggable with any site. For plugin build, I am using "webpack" and follow commonjs/es6 module system. Suppose end user may be used react in their website, Is it affect my plugin? (ex: like two jquery we are using in website then we use jquery.noconflict())?
Note: I didn't export react outside. Is React maintain any information in global?
Short answer is no.
Most 3rd party React components require that the application consuming them provide a compatible version of React.
This is why you see React as a peerDependency in the package.json of these libraries.

Resources