title: Babel Webpack ES6 React : require is not defined
body: <p>Despite heavy efforts to my knowledge, I am not able to get: </p>
  
  <blockquote>
    <p><a href="https://i.stack.imgur.com/MkPDk.png" rel="nofollow noreferrer">ReactDebugTool.js:14 Uncaught ReferenceError: require is not defined(…)</a> </p>
  </blockquote>
  
  <p>I have written a webpack config as below: </p>
  
  <pre><code>// webpack.config.babel.js
  
  import path from 'path';
  import webpack from 'webpack';
  import HtmlWebpackPlugin from 'html-webpack-plugin';
  import ExtractTextPlugin from 'extract-text-webpack-plugin';
  
  const sharedConfiguration = {
    cache: true,
    context: __dirname,
    entry: {
      app: ["./example/example.js"],
      styles: ["./example/example.scss"]
    },
    devtool: "source-map",
    resolve: {
      extensions: ["", ".js"]
    },
    module: {
      preLoaders: [
        { test: /\.js$/, loaders: ["eslint", "eslint-loader"] }
      ],
      loaders: [
        { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/, query: { presets: ["es2015", "stage-0", "react"], plugins: ['transform-runtime'] } },
        { test: /\.(scss|sass)$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap") },
        { test: /\.html$/, loaders: ["html-loader"] },
        { test: /\.(jpg|png|woff|woff2|eot|ttf|svg|ico)$/, loader: "file-loader?name=[name]-[hash].[ext]" },
        { test: /\.(json|geojson)$/, loader: "json-loader" }
      ],
      noParse: /ol\.js/
    },
    eslint: {
      configFile: './.eslintrc'
    }
  };
  
  const developmentConfiguration = {
    watch: true,
    output: {
      pathinfo: true,
      filename: "[name]-[chunkhash].js",
      path: path.resolve("./.tmp")
    },
    devServer: {
      port: 8081
    },
    plugins: [
      new ExtractTextPlugin("[name]-[chunkhash].css"),
      new webpack.optimize.CommonsChunkPlugin({
        name: "vendor"
      }),
      new HtmlWebpackPlugin({
        template: "./example/example.ejs",
        inject: false
      })
    ]
  };
  
  let environmentConfiguration = developmentConfiguration;
  
  const configuration = {
    ...sharedConfiguration,
    ...environmentConfiguration
  };
  
  export default configuration;
  </code></pre>
  
  <p>And my project holds a <a href="https://i.stack.imgur.com/sZfXo.png" rel="nofollow noreferrer">folder structure like this</a>.</p>
  
  <pre><code>// example.ejs
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Editor&lt;/title&gt;
      &lt;script src="&lt;%= htmlWebpackPlugin.files.chunks.vendor.entry %&gt;"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="&lt;%= htmlWebpackPlugin.files.chunks.styles.css[0] %&gt;"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;script src="&lt;%= htmlWebpackPlugin.files.chunks.app.entry %&gt;"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>// example.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import Hello from '../source/index';
  
  ReactDOM.render(&lt;Hello /&gt;, document.getElementById('root'));
  </code></pre>
  
  <hr>
  
  <pre><code>// source/index.js
  import React, {Component} from 'react';
  
  export default class Hello extends Component {
    render () {
      return (
        &lt;div&gt;
          Hello
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Most of the articles I referred, indicated to <code>CommonsChunkPlugin</code> I tried rectifying it, but was in vain. Any help would be appreciated.</p>