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.

Answer 1

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'

Answer 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')