Use components from two versions of the same library (npm / Material UI in my case)

Question

I'm using the latest stable version of Material UI in my production React app.

I need the updated Data Tables component, which is currently in Material UI's unstable alpha branch.

I don't want to upgrade my whole app with npm i material-ui@next because of the numerous breaking changes.

How can I access the alpha library without upgrading my whole library? Can I install two versions of MUI? Can I call on the alpha API without installing it through NPM?

Thanks in advance.

Installing multiple versions of a package in parallel using npm is not possible. The best workaround I've seen is to create a "shim" package (ex material-ui-next that depends on material-ui@next) and depend on that in your project. — Aaron Beall
– Aaron Beall, Commented Feb 15, 2017 at 19:58
thank you @Aaron -- I'm familiar with shims in the npm registry, would I have to create a new, renamed npm package, or can I do this locally? — Doa
– Doa, Commented Feb 15, 2017 at 20:46
Yes, you can install a local filesystem module using npm install ./path/to/material-ui-next or you can use npm link. — Aaron Beall
– Aaron Beall, Commented Feb 16, 2017 at 2:07
Hi Doa, did you find any solution to this? I am having this problem and you might have some insights on how to tackle that: stackoverflow.com/questions/47947521/… Thanks. — Kevin Ghaboosi
– Kevin Ghaboosi, Commented Dec 22, 2017 at 22:08
Hey @KevinGhaboosi very belated reply, but I followed Aaron's instructions above and it worked like a charm. — Doa
– Doa, Commented Feb 26, 2019 at 2:38

Kuf · Accepted Answer · 2017-08-12 15:31:31Z

18

After some googling, found this. To use both versions:

yarn add material-ui@latest
yarn add material-ui-next@npm:material-ui@next

Then you can use

import Divider from 'material-ui-next/Divider'

or

import Divider from 'material-ui/Divider'

answered Aug 12, 2017 at 15:31

Kuf

17.9k7 gold badges69 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jumpa Over a year ago

I successfully added the two versions of the library with Yarn, but after compiling I get: TypeError: Cannot read property 'prepareStyles' of undefined.

BarthesSimpson Over a year ago

@Jumpa same here. I think it's to do with the different way MuiThemeProvider is used in the two different versions. I'm trying to solve this currently - let me know if you find a solution.

Alex Over a year ago

there is a caveat to this solution: every time I do a yarn upgrade, yarn converts both material-ui versions in package.json to the next version. I then have to manually correct to 0.20.0, delete node_modules and yarn.lock, then run yarn again

Ilan Schemoul · Accepted Answer · 2017-03-14 12:58:08Z

2

I created in /packages a folder called material-ui-next with only a package.json inside it which contains :

{
  "name": "material-ui-next",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "mv node_modules/material-ui/* ."
  },
  "dependencies": {
    "material-ui": "next"
  }
}

So now from the root of the project one can do npm install packages/material-ui-next --save then one can createPalette = require('material-ui-next/styles/palette') or whatever one wants to require from material-ui now aliased as material-ui-next.

Explanations : as "material-ui": "next" is a dependency it's will be installed in node_modules/material-ui so by adding a script after the package material-ui-next is installed to move node_modules/material-ui to the root of the package we can require('material-ui-next/WHATEVER')

edited Mar 14, 2017 at 12:58

answered Mar 14, 2017 at 12:43

Ilan Schemoul

1,6931 gold badge14 silver badges17 bronze badges

2 Comments

Kuf Over a year ago

won't it also move the original node_modules/material-ui/ folder?

Ilan Schemoul Over a year ago

I'm not sure to understand your question but if you're wondering if the postinstall scripts may move the module of your actual projet it isn't the case because the root folder of the script will actually %YOURPROJECTROOT%/node_modules/material-ui-next and this folder contains another node_modules with material-ui whose content is moved by the script to the top of the folder material-ui-next. Does that answer your question ?

Collectives™ on Stack Overflow

Use components from two versions of the same library (npm / Material UI in my case)

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related