React warning error stops compiling the app

Question

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

And does it build without the link components in the render method? — Martin, Aug 11 '16 at 13:27
Can you try `import { Link } from 'react-router'` instead of `import Link from 'react-router';` — HiDeoo, Aug 11 '16 at 13:29
Is render also imported? Does it error when its building? Try taking out the components and see if it renders. What im thinking is perhaps "/test1" and "/test2" dont exist — Martin, Aug 11 '16 at 13:30

score 4 · Accepted Answer · answered Aug 11 '16 at 13:29

4

import {Link} from 'react-router'

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

answered Aug 11 '16 at 13:29

Harkirat Saluja

7,768
5
47
73

yes it did... I am new to React... why did that solve it? – Aessandro Aug 11 '16 at 13:32
Yes sure. You can check it out here http://stackoverflow.com/questions/31096597/using-brackets-with-javascript-import-syntax – Harkirat Saluja Aug 11 '16 at 13:33

score 1 · Answer 2 · answered Aug 11 '16 at 13:32

Could you try with the following

Also please take a look at https://github.com/reactjs/react-router/blob/master/docs/Introduction.md

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>
        {this.props.children}
      </div>
    );
  }
}

export default App;

React warning error stops compiling the app

2 Answers2