title: How to import bundle created in webpack?
body: <p>I have a <strong>Project1</strong> which is bundled through webpack. My requirement is that this bundle.js will be put on a CDN so that I can use the modules exported in Project 1 inside <strong>Project2</strong>.</p>
  
  <p><em>Project 1 files</em> -></p>
  
  <p><strong>Hello.jsx:</strong></p>
  
  <pre><code>import React, { Component } from "react";
  
  export default class Hello extends Component {
  
    render() {
      return (
        &lt;h1&gt;Hello World&lt;/h1&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>index.js:</strong></p>
  
  <pre><code>export {Hello} from "./src/Hello.jsx";
  </code></pre>
  
  <hr>
  
  <p>I am creating a bundle named <strong>bundle.js</strong> and for demo purposes, instead of adding it in the CDN, I am simply copying this <strong>bundle.js</strong>(in same folder as App.jsx) and referring it in <strong>Project2</strong>.</p>
  
  <p><em>Project 2 files</em> -></p>
  
  <p><strong>App.jsx:</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import Hello from "./bundle.js";
  
  export default class App extends Component {
      render() {
          return (
              &lt;Hello/&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>index.js:</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import ReactDOM from "react-dom";
  import App from "./src/App.jsx";
  
  ReactDOM.render(
      &lt;App /&gt;,
      document.getElementById("root2")
  );
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;webpack 2 demo&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="root2"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I am trying to run <strong>Project2</strong> using webpack-dev-server with HMR enabled but it gives errors in Google Chrome console:</p>
  
  <blockquote>
    <p>Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.</p>
    
    <p>Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.</p>
  </blockquote>
  
  <ul>
  <li>Current versions of packages:</li>
  </ul>
  
  <blockquote>
    <p>"react": "^15.4.2"
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2",
    "babel-core": "^6.24.0"</p>
  </blockquote>
  
  <p>Am I doing Import in a wrong fashion? Or is there something wrong in Export? Please help.</p>
  
  <p>Edit:
  Adding webpack.config.js for <strong>Project1</strong> as Joe Clay <a href="https://stackoverflow.com/questions/42949247/how-to-import-bundle-created-in-webpack#comment72993866_42949247">suggested</a>:</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  module.exports = {
    entry: './index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      libraryTarget: 'umd',
      library: 'Hello'
    },
    devtool: 'eval-source-map',
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx'],
    },
    plugins: [
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.ProvidePlugin({
        React: 'react'
      })
    ],
  };
  </code></pre>