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

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.

  • Heroku App is Not Using the Right Node Module
  • npm install from private registry with fallback to a git repository URL
  • Missing directories and files on npm install
  • Git auth failing when running npm install as sudo
  • How can I preserve local changes made to an NPM module?
  • Creating a new Ionic project through Ionic CLI suddenly started producing npm/git errors
  • 2 Solutions collect form web for “Use components from two versions of the same library (npm / Material UI in my case)”

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

    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'
    
    Git Baby is a git and github fan, let's start git clone.