title: Error: Uncaught ReferenceError: React is not defined
body: <h1>Overview</h1>
  
  <p>I am trying to use Babel and Webpack to build a React app. I know I could use <code>create-react-app</code> but I'd like to learn how these technologies can work together for myself.</p>
  
  <p>When I run <code>yarn run start</code> or <code>yarn run build</code> (see <strong>package.json</strong> below), Webpack reports to have built the bundle fine. When I run the application in the browser, I get the <code>Uncaught ReferenceError: React is not defined</code> error.</p>
  
  <p>There are a number of questions on SO regarding this same error, but none of the solutions have solved my problem yet.</p>
  
  <h1>Question</h1>
  
  <p>What piece am I missing to get React, Babel, and Webpack to play together nicely?</p>
  
  <h1>Code</h1>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "private": true,
    "scripts": {
      "build": "webpack",
      "start": "webpack-dev-server"
    },
    "dependencies": {
      "react": "^15.4.1",
      "react-dom": "^15.4.1",
      "react-redux": "^5.0.1",
      "redux": "^3.6.0"
    },
    "devDependencies": {
      "babel-core": "^6.21.0",
      "babel-loader": "^6.2.10",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-react": "^6.16.0",
      "redux-devtools": "^3.3.1",
      "webpack": "^1.14.0",
      "webpack-dev-server": "^1.16.2"
    }
  }
  </code></pre>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{
    "presets": ["react", "es2015"]
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: './dist'
    },
    devtool: 'source-map',
    debug: true,
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }
      ]
    }
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script src="dist/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>src/index.js</strong></p>
  
  <pre><code>import ReactDom from 'react-dom';
  import React from 'react';
  import App from './App';
  
  ReactDom.render(
    &lt;App /&gt;,
    document.getElementById('root'),
  );
  </code></pre>
  
  <p><strong>src/App.js</strong></p>
  
  <pre><code>import React from 'react';
  import { Component } from 'react';
  
  export default class App extends Component {
    render() {
      return (
        &lt;h1&gt;hello&lt;/h1&gt;
      );
    }
  }
  </code></pre>
  
  <h1>Observations</h1>
  
  <ul>
  <li>It seems that Webpack/Babel is expecting <code>React</code> to be available on the global scope, or is ignoring my <code>import React from 'react';</code> statements.</li>
  <li>Also, I have yet to find the proper incantation of <code>devtools</code> and <code>debug</code> properties in my Webpack config to actually get source maps working. I don't yet see them in the compiled output.</li>
  </ul>
  
  <h2>EDIT</h2>
  
  <p>The broken <strong>bundle.js</strong> is too large for SO (21,000+ lines), so here is a link: <a href="http://chopapp.com/#1a8udqpj" rel="nofollow noreferrer">http://chopapp.com/#1a8udqpj</a> — it takes several seconds to load and display.</p>