React warning error stops compiling the app

by

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…

enter image description here

43 thoughts on “React warning error stops compiling the app”

Leave a Comment