How to add material-ui to webpack externals?

I’m building a library which bases on Material UI and want to publish components without bundling material-ui’s code. I’ve tried adding the lib to externals but that seems to bundle it anyway. Here’s my webpack@4.11.1 config excerpt:

externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
    },
    'material-ui': {
      root: 'MaterialUI',
      commonjs2: 'material-ui',
      commonjs: 'material-ui',
      amd: 'material-ui',
    },
  },

React does not get bundled in, but Material UI does. The component that I’m trying to publish has the following import statement:

import Typography from 'material-ui/Typography';

One ugly way to solve it is to provide a config similar to:

    'material-ui/Typography': {
      root: 'material-ui/Typography',
      commonjs2: 'material-ui/Typography',
      commonjs: 'material-ui/Typography',
      amd: 'material-ui/Typography',
    },

But that’s just not maintainable. Another option would be to follow https://stackoverflow.com/a/41823893/2066118 but I’m not sure whether that’s a recommended way, or whether it would work with v1

[maciej-gurban]

I’ve gone and tried using rollup to package my component library (by using the exact same code material-ui uses package the lib). Had some issues with UMD builds, but other than that it worked fine.

With fresh mind in the morning I tried to resolve the issue still using webpack. In case somebody stumbles upon the same issues, the fix is trivially simple. You can use a regexp to filter out your externals. In my case, the config looks like so:

  externals: [
    {
      react: {
        root: 'React',
        commonjs2: 'react',
        commonjs: ['react'],
        amd: 'react',
      },
    },
    /@material-ui\/core\/.*/,
  ],

The original issue which sent me on this spiral of madness was trying to use storybook to render components of my application which use my external component library, packaged with webpack. This will work if you’re importing them from node_modules (as will be the in most cases), but I wanted to load them from disk - to verify whether packaged component behaves correctly before publishing the component library.

This won’t work because webpack will try to parse their code (and you’ll end up with errors about module being undefined, or similar module-related error). The same would happen if your babel-loader didn’t ignore node_modules. However, since storybook has their own webpack config, you’d need to find a way to tell storybook’s babel-loader not to parse your on-disk packages components. This seems to be possible only by passing a full webpack config from your app to storybook, but in my case that’s not an option because atm storybook is at webpack 2, while my app at webpack 4.

EDIT: changed the regexp from /@material-ui\/core\/*./, to /@material-ui\/core\/.*/, (switch .the places of * and .) to match the whole path rather than jus the beginning

[oliviertassinari]

@maciej-gurban Use the same pattern that we use to prevent react & react-dom from being bundled. I don’t think the question is specific to Material-UI.