React error "Uncaught Invariant Violation" when using react-router
<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>