title: Error with my React Application - 'A valid React element (or null) must be returned'
body: <p>I have 2 React Components which are below.  When I try to load it in Internet Explorer 9 I get the following error:
  <a href="https://i.stack.imgur.com/QBYcE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QBYcE.png" alt="IE Error"></a></p>
  
  <pre><code>// App.jsx
  import React from 'react';
  import Main from './Main';
  
  const App = () =&gt; (
    &lt;div&gt;
      &lt;Main /&gt;
    &lt;/div&gt;
  );
  
  export default App;
  
  // Main.jsx
  import React from 'react';
  
  const Main = () =&gt; (
    &lt;div&gt;
      Testing Main Component
    &lt;/div&gt;
  );
  
  export default Main;
  </code></pre>
  
  <p>I am confused because both App and Main are the same syntax but I can change the content of App to be the following and it renders to the screen with no issues:</p>
  
  <pre><code>import Main from './Main';
  
  const App = () =&gt; (
    &lt;div&gt;
      This is a test render
    &lt;/div&gt;
  );
  
  export default App;
  </code></pre>
  
  <p>I am kind of stuck and have read most of the other posts on SO with the same issue but none seem to help.  Sorry if this question should not be asked here but really stuck and any help would be appreciated.</p>
  
  <p>Thanks</p>
  
  <p>// Babel.js config</p>
  
  <pre><code>module.exports = {
    test: /\.(js|jsx)?(\.erb)?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      plugins: ['transform-class-properties', 'add-module-exports', 'transform-react-inline-elements'],
      presets: [
        'react',
        'stage-2',
        'es2015',
        ['env', { modules: false }],
      ],
    },
  };
  </code></pre>