6

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.

bernie
  • 9,820
  • 5
  • 62
  • 92
Sri
  • 568
  • 1
  • 6
  • 18

1 Answers1

8

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.

Rusurano
  • 444
  • 5
  • 12
  • '@rjsf/material-ui' is expecting latest version of @material-ui/core, and its breaking. – Sri Dec 13 '21 at 04:24
  • You probably broke the dependency chain somewhere in package-lock.json. Thus I recommend you to delete package-lock.json, delete entire node_modules folder, apply the alias, and then run `npm i` to reinstall the project's dependencies. – Rusurano Dec 19 '21 at 19:08