title: How to import ReactJS Material UI using a CDN through Webpack's externals?
body: <h2>The Problem:</h2>
  
  <p>I'm trying to create a website (web app) with <a href="https://reactjs.org/" rel="noreferrer">React</a> and <a href="https://material-ui.com/" rel="noreferrer">Material UI</a>, it's working just fine using npm. But when I try to make them as <code>externals</code> and import them through a CDN instead, I get an error with Material UI (React works fine).</p>
  
  <h2>My Code:</h2>
  
  <p>I linked CDNs in <strong>index.html</strong> like this:</p>
  
  <pre><code>&lt;script src="https://unpkg.com/react@16/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="app.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And in <strong>app.min.js</strong>, I imported them like this:</p>
  
  <pre><code>import { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { Button } from '@material-ui/core';
  </code></pre>
  
  <h2>My Attempt:</h2>
  
  <p>In the <strong>webpack.config.js</strong>, I tried the following (again, only Material UI causes an error):</p>
  
  <ol>
  <li><p>Using a string:</p>
  
  <pre><code>externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    '@material-ui/core': 'Button'
  }
  </code></pre>
  
  <p>gives:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: Button is not defined</p>
  </blockquote></li>
  <li><p>Using an object:</p>
  
  <pre><code>externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    '@material-ui/core': {
      Button: '@material-ui/core'
    }
  }
  </code></pre>
  
  <p>gives:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'Button' of undefined</p>
  </blockquote></li>
  <li><p>Doing it manually, so Material UI isn't in externals:</p>
  
  <pre><code>externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
  </code></pre>
  
  <p>Then removing minified Material UI code from <strong>app.min.js</strong>, this leaves the code incomplete and it doesn't run.</p></li>
  <li><p>Searched through GitHub issue and SO questions without any luck, some links:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/37102609">How should material-ui be externalized when bundling with webpack</a></li>
  <li><a href="https://stackoverflow.com/questions/41823313">Externals defined in webpack.config still getting error module not found</a></li>
  <li><a href="https://stackoverflow.com/questions/42632894">React CDN: Webpack externals library not resolved in code</a></li>
  </ul></li>
  </ol>
  
  <p>Any idea how can I solve this?</p>