title: React error "Uncaught Invariant Violation" when using react-router
body: <p>I'm stumped on what this error message could mean or why I only get it when trying to use react-router. The app works fine if I render a component directly like this: <code>render(&lt;App /&gt;, document.getElementById('root'));</code> </p>
  
  <p>But when I try to use the <code>&lt;BrowserRouter&gt;</code>, <code>&lt;Match&gt;',</code> &amp; <code>&lt;Miss&gt;</code> elements from <code>react-router</code>, like this: <code>render(&lt;Main /&gt;, document.getElementById('root'));</code>, I get the following error message from my console: </p>
  
  <p><code>Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of</code>Main<code>.</code></p>
  
  <p>I'm also seeing this error in an invariant.js file: <code>error.framesToPop = 1; // we don't care about invariant's own frame error = Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined...</code></p>
  
  <p>Here's my index.js file</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { BrowserRouter, Match, Miss } from 'react-router';
  import App from './App';
  import SineWave from './SineWave';
  import NotFound from './NotFound';
  import './index.css';
  
  const Main = () =&gt; {
    return (
      &lt;BrowserRouter&gt;
        &lt;div&gt;
          &lt;Match exactly pattern="/" component={App} /&gt;
          &lt;Match exactly pattern="/lesson-one" component={SineWave} /&gt;  
          &lt;Miss component={NotFound} /&gt;
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    )
  }
  
  render(&lt;Main /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>Does anyone have any idea what's wrong here?</p>
  
  <p>I'm not sure if this is useful, but here's the webpack data with some clues as to where the error might be:</p>
  
  <pre><code>function invariant(condition, format, a, b, c, d, e, f) {
    if (true) {
      if (format === undefined) {
        throw new Error('invariant requires an error message argument');
      }
    }
  
    if (!condition) {
      var error;
      if (format === undefined) {
        error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
      } else {
        var args = [a, b, c, d, e, f];
        var argIndex = 0;
        error = new Error(format.replace(/%s/g, function () {
          return args[argIndex++];
        }));
        error.name = 'Invariant Violation';
      }
  
      error.framesToPop = 1; // we don't care about invariant's own frame
      throw error;
    }
  }
  
  module.exports = invariant;
  </code></pre>
  
  <p>**Additional components that may be causing the problem:
  Here's my App.js file: </p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import Header from './Header';
  import Instructions from './Instructions';
  import SineWave from './SineWave';
  
  
  const App = (props) =&gt; {
    return (
      &lt;div className="App"&gt;
        &lt;div className="header"&gt;
            &lt;Header /&gt;
        &lt;/div&gt;
        &lt;div className="body"&gt;
          &lt;div className="instructions"&gt;
            &lt;Instructions instructionText="Here are the instructions!"/&gt;
          &lt;/div&gt;
          &lt;div className="SineWave"&gt;
            &lt;SineWave soundText="This is a sound."/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;);
  };
  
  export default App;
  </code></pre>
  
  <p>And here is the SineWave.js file, which is also referenced:</p>
  
  <pre><code>import React from 'react';
  
  class SineWave extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;button classID="playSine"&gt;PLAY SINEWAVE&lt;/button&gt;
          &lt;p&gt;{this.props.soundText}&lt;/p&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default SineWave;
  </code></pre>
  
  <p>And finally, the NotFound.js file:</p>
  
  <pre><code>import React from 'react';
  
  class NotFound extends React.Component {
    render() {
      return (
        &lt;h2&gt;Not Found!111!!&lt;/h2&gt;
      )
    }
  }
  
  export default NotFound;
  </code></pre>