How to manage multiple versions of npm modules in a project for different packages internally dependent on specific versions?

user_861074 0
Viewed 937

I am in a situation where my main react project uses "@material-ui/core": "^1.5.1" , and for a new component that I am trying to build I want to use #@rjsf/material-ui":"3.2.1" which internally expects latest version of "@material-ui/core": "4.12.3". With out disturbing the main project's @material-ui/core version, how can i install both the versions, and force "@rjsf/material-ui":"3.2.1" to refer "@material-ui/core": "4.12.3" ?

I looked here for a possible solution, but "@rjsf/material-ui":"3.2.1", still internally refers to "@material-ui/core": "^1.5.1" and breaks. What is the way out for this problem? Thanks in advance.

node-modules npm material-ui reactjs
1 Answers

To have multiple versions of the same package installed on your environment, you will need to use a principle called aliasing. To apply it, use the following command to install a package:

npm i <package_name_alias>@npm:<package_name>

Here, <package_name_alias> is the name used for importing this specific version of the package by JavaScript files, and <package_name> is your package you want to have multiple versions of.

I'll give you the example on react-bootstrap npm package. For example, you want to have both Bootstrap 4 and Bootstrap 5 based versions. Thus, you will have to execute these commands:

npm i react-bootstrap-v5@npm:react-bootstrap@2.0.3
npm i react-bootstrap-v4@npm:react-bootstrap@1.6.4

This way, to import a button based on Bootstrap 4 in your JavaScript file, you will need to import version 1.6.4 of react-bootstrap, and you will do so by using its alias:

import { Button } from 'react-bootstrap-v4'

And if you will want the Bootstrap 5 based button, your import will be the following:

import { Button } from 'react-bootstrap-v5'

One version of the packages (which in your case is your @material-ui/core version you are using) may remain unaliased.

user_139632160
Related