React error "Uncaught Invariant Violation" when using react-router

Question

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: render(<App />, document.getElementById('root'));

But when I try to use the <BrowserRouter> , <Match>', & <Miss> elements from react-router , like this: render(<Main />, document.getElementById('root')); , I get the following error message from my console:

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 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 Main .

I'm also seeing this error in an invariant.js file: 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... 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...

Here's my index.js file

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 = () => {
  return (
    <BrowserRouter>
      <div>
        <Match exactly pattern="/" component={App} />
        <Match exactly pattern="/lesson-one" component={SineWave} />  
        <Miss component={NotFound} />
      </div>
    </BrowserRouter>
  )
}

render(<Main />, document.getElementById('root'));

Does anyone have any idea what's wrong here?

I'm not sure if this is useful, but here's the webpack data with some clues as to where the error might be:

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;

**Additional components that may be causing the problem: Here's my App.js file:

import React from 'react';
import './App.css';
import Header from './Header';
import Instructions from './Instructions';
import SineWave from './SineWave';


const App = (props) => {
  return (
    <div className="App">
      <div className="header">
          <Header />
      </div>
      <div className="body">
        <div className="instructions">
          <Instructions instructionText="Here are the instructions!"/>
        </div>
        <div className="SineWave">
          <SineWave soundText="This is a sound."/>
        </div>
      </div>
    </div>);
};

export default App;

And here is the SineWave.js file, which is also referenced:

import React from 'react';

class SineWave extends React.Component {
  render() {
    return (
      <div>
        <button classID="playSine">PLAY SINEWAVE</button>
        <p>{this.props.soundText}</p>
      </div>
    )
  }
}

export default SineWave;

And finally, the NotFound.js file:

import React from 'react';

class NotFound extends React.Component {
  render() {
    return (
      <h2>Not Found!111!!</h2>
    )
  }
}

export default NotFound;

Answer 1

SOLVED : It turns out that <BrowserRouter> can only be used in react-router v4 ... I was using v2.8, which is the version that's is installed when you type npm install --save react-router . If you want to use react-router v4 you'll need to use npm install --save react-router@next . Here's a link to the v4 branch on GitHub:https://github.com/ReactTraining/react-router/blob/v4/README.md –

Answer 2

Have you tried rendering Main like this?:

render(
    (
        <Main/>
    ),
    document.getElementById("selector")
);

Note that I have surrounded the Main component in brackets.

It might be a dumb solution, but I know I've encountered this before and I believe it's an issue with rendering.