title: Webpack: How can I use a named export in the global scope
body: <p>This post: <a href="https://stackoverflow.com/questions/31197220/can-i-use-an-es6-2015-module-import-to-set-a-reference-in-global-scope">Can I use an ES6/2015 module import to set a reference in &#39;global&#39; scope?</a> answers the problem of "how do I make a module globally available in Webpack?" by using Webpack's <code>ProvidePlugin</code>:</p>
  
  <pre><code>// webpack.config.js
  plugins: [
      new webpack.ProvidePlugin({
          React: "react",
      })
  ],
  
  // Foo.js
  class Foo extends React.Component { // React is global
  </code></pre>
  
  <p>But what if I want to make a global for a named export, instead of a default export?  In other words, what if I want to do:</p>
  
  <pre><code>// Foo.js
  class Foo extends React.Component {
      propTypes = {
          bar: PropTypes.string, // PropTypes were never imported
      }
  </code></pre>
  
  <p>The problem is that <code>PropTypes</code> is a named export, which means I'd normally import it as:</p>
  
  <pre><code>import {PropTypes} from 'react';
  </code></pre>
  
  <p>but I can't do that in the Webpack config:</p>
  
  <pre><code>new webpack.ProvidePlugin({
      {PropTypes}: "react", // this doesn't work
  })
  </code></pre>
  
  <p>So, my question is: is there any way to expose a named export (eg. React's <code>PropTypes</code>) globally with Webpack?</p>
  
  <p>P.S. I would just do it explicitly in my root JS file:</p>
  
  <pre><code>// index.js
  import {PropTypes} from 'react';
  global.PropTypes = PropTypes;
  import 'restOfMyCode';
  </code></pre>
  
  <p>but that doesn't work because the imports are hoisted and occur before the <code>global.PropTypes</code> ever get set, so when my modules get imported there's no <code>global.PropTypes</code> for them to use. </p>