React warning error stops compiling the app

I have the following:

• nav.jsx component: (everything was working fine till this point)
  
  

  import React from 'react';
  
  import Link from 'react-router';
  
  
  
  class Nav extends React.Component {
  
   render () {
  
    return (
  
     <ul>
  
      <li><Link to='/test1'>test1</Link></li>
  
      <li><Link to='/test2'>test2</Link></li>
  
     </ul>
  
    );
  
   }
  
  }
  
  
  
  export default Nav;
  
  

a routes component as follow:

• routes.js
  
  

  import React from 'react';
  
  import { Route, Router, IndexRoute } from 'react-router';
  
  import ReactDOM from 'react-dom';
  
  
  
  import App from './index.jsx';
  
  import Test1 from './test1.jsx';
  
  import Test2 from './test2.jsx';
  
  
  
  ReactDOM.render((
  
  <Router>
  
   <Route path="/" component={App} />
  
   <Route path="/test1" component={Test1} />
  
   <Route path="/test2" component={Test2} />
  
  </Router>
  
  ), document.getElementById('app'));
  
  

and an index.jsx like this:

import React from 'react';

import {render} from 'react-dom';



import Nav from './nav.jsx';



class App extends React.Component {

  render () {

    return (

      <div>

        <Nav />

        <p> Hello React!</p>

      </div>

    );

  }

}



export default App;

however I get the following error in the console:

invariant.js:38 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

Nav

.

Everything was working fine untill I have added the "Nav" component...