title: How to configure Rollup for a React application?
body: <p>I've got two other applications that are working just fine with Rollup &amp; React but this time around even this - a very simple example is not working.</p>
  
  <p>Not sure what I'm missing but this set up throws <code>Uncaught Reference: React is not defined</code></p>
  
  <p><strong>rollup.config.js:</strong></p>
  
  <pre><code>import babel from 'rollup-plugin-babel';
  import commonjs from 'rollup-plugin-commonjs';
  import resolve from 'rollup-plugin-node-resolve';
  import serve from 'rollup-plugin-serve';
  import livereload from 'rollup-plugin-livereload';
  
  export default {
    input: './index.js',
    output: {
      file: './build/index.js',
      format: 'iife',
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM',
      },
    },
    plugins: [
      resolve(),
      babel(),
      commonjs(),
      serve({
        contentBase: '',
        host: 'localhost',
        port: '8000',
      }),
      livereload(),
    ],
    external: [
      'react',
      'react-dom',
    ],
  };
  </code></pre>
  
  <p><strong>.babelrc:</strong></p>
  
  <pre><code>{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  }
  </code></pre>
  
  <p><strong>package.json:</strong></p>
  
  <pre><code>{
    "name": "xxx",
    "private": true,
    "description": "xxx",
    "version": "0.0.1",
    "license": "MIT",
    "scripts": {
      "build": "rollup -c",
      "test": "echo No tests specified"
    },
    "repository": {
      "type": "git",
      "url": "xxx"
    },
    "devDependencies": {
      "@babel/core": "^7.6.3",
      "@babel/preset-env": "^7.6.3",
      "@babel/preset-react": "^7.6.3",
      "prettier": "^1.18.2",
      "prop-types": "^15.7.2",
      "rollup": "^1.23.1",
      "rollup-plugin-babel": "^4.3.3",
      "rollup-plugin-commonjs": "^10.1.0",
      "rollup-plugin-livereload": "^1.0.4",
      "rollup-plugin-node-resolve": "^5.2.0",
      "rollup-plugin-peer-deps-external": "^2.2.0",
      "rollup-plugin-postcss": "^2.0.3",
      "rollup-plugin-serve": "^1.0.1",
      "rollup-plugin-svg": "^2.0.0",
      "rollup-plugin-terser": "^5.1.2"
    },
    "dependencies": {
      "xxx": "^0.1.0",
      "xxx": "^0.1.1",
      "classnames": "^2.2.6",
      "react": "^16.10.2",
      "react-dom": "^16.10.2",
      "react-easy-state": "^6.1.3",
      "semantic-ui-react": "^0.88.1"
    }
  }
  </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;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  
      &lt;title&gt;blah&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="test-app"&gt;&lt;/div&gt;
      &lt;script type="application/javascript" src="./build/index.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>index.js:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  const Thing = () =&gt; {
    return &lt;div&gt;Hi&lt;/div&gt;;
  };
  
  ReactDOM.render(&lt;Thing /&gt;, document.getElementById('test-app'));
  </code></pre>
  
  <p>What am I doing wrong? I get the feeling it is something <strong>exceedingly</strong> simple. Please let me know if I could add anymore details that may help. Thanks in advance!</p>