React warning error stops compiling the app Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of React warning error stops compiling the app without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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 (
                    <Link to="/test1">test1</Link>
                    <Link to="/test2">test2</Link>

export default Nav;  

a routes component as follow:


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";

        <Route path="/" component={App} />
        <Route path="/test1" component={Test1} />
        <Route path="/test2" component={Test2} />

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 (
                <Nav />
                <p> Hello React!</p>

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


import {Link} from 'react-router'

Above should do your job. Can you give it a try once?

We are here to answer your question about React warning error stops compiling the app - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji