How should material-ui be externalized when bundling with webpack

Question

I packed material-ui from material-ui/index.js into material-ui.js for serving it externally. The import statements are like

import FlatButton from 'material-ui/FlatButton';

How should webpack be configured to exclude material-ui as external dependency?\ I believe changing imports as this would help in externalizing but have no idea how to deal with material-ui thereafter.

import material-ui from 'material-ui'

@flexicious.com see here: https://github.com/callemall/material-ui/issues/262. They are building a tool for umd builds — eskawl, Feb 10 '17 at 19:14

score 0 · Answer 1 · answered Feb 06 '20 at 06:04

After a lot of research here is what I have found to solve this problem;

Put this method above your module.exports in webpack.config

function externalForMaterialUi(context, request, callback) {
  if (/@material-ui.+/.test(request)) {
    const name = request.replace(/^.*[\\\/]/, '')
    return callback(null, 'root MaterialUI.' + name);
  }
  callback();
}

And after you should call the method from your webpack externals section;

externals: [
    externalForMaterialUi,
]

with this way all the packages of material-ui from your bundle will be excluded.

Another way of doing this is including all the material packages one by one inside externals section;

externals: [
  {
    '@material-ui/types': {
      root: 'MaterialUI',
      commonjs2: 'material-ui',
      commonjs: 'material-ui',
      amd: 'MaterialUI',
      umd: 'MaterialUI',
    },
    '@material-ui/pickers': {
      root: 'MaterialUI',
      commonjs2: 'material-ui',
      commonjs: 'material-ui',
      amd: 'MaterialUI',
      umd: 'MaterialUI',
    },
    '@material-ui/core': {
      root: 'MaterialUI',
      commonjs2: 'material-ui',
      commonjs: 'material-ui',
      amd: 'MaterialUI',
      umd: 'MaterialUI',
    },
    '@material-ui/lab': {
      root: 'MaterialUI',
      commonjs2: 'material-ui',
      commonjs: 'material-ui',
      amd: 'MaterialUI',
      umd: 'MaterialUI',
    },

  },
],

How should material-ui be externalized when bundling with webpack

1 Answers1

Linked