Uncaught Error: Invariant Violation: Element type is invalid: Object
I'm tinkering with react-router
, tying to implement simple routing. I type my code as written in their example (but without import
s) https://github.com/rackt/react-router#whats-it-look-like.
And I get this error in a browser:
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Here is what I do.
I attach scripts on the page, ReactRouter.min.js
and my code in react-routes.js
. And also react
and react-dom
and jquery (all three in app.js
):
<script src="/js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
<script src="/js/react-routes.js" type="text/javascript" charset="utf-8"></script>
Here is my react-router.js
, not compiled yet:
'use strict';
window.Router = window.ReactRouter;
window.Link = window.ReactRouter.Link;
window.Route = window.ReactRouter.Route;
const Foo = React.createClass({
render() {
return (
<div>
<h1>HELLO, me FOO</h1>
</div>
)
}
});
ReactDOM.render((
<Router>
<Route path="/" >
<Route path="/page/one" component={Foo}/>
</Route>
</Router>
), document.getElementById('content-section'))
This is my react-router.js
after compilation with Babel. I attach exactly this on the page:
babel --presets react -o public/js/react-routes.js assets/js/react-routes.js
:
'use strict';
window.Router = window.ReactRouter;
window.Link = window.ReactRouter.Link;
window.Route = window.ReactRouter.Route;
const Foo = React.createClass({
displayName: "Foo",
render() {
return React.createElement(
"div",
null,
React.createElement(
"h1",
null,
"HELLO, me FOO"
)
);
}
});
// Error is thrown here, in this line
ReactDOM.render(React.createElement(
Router,
null,
React.createElement(
Route,
{ path: "/" },
React.createElement(Route, { path: "/page/one", component: Foo })
)
), document.getElementById('content-section'));
What do I do wrong? Why the error is thrown? Router is an object, not a React Component. Why? I look at this example and type my code the same way https://github.com/rackt/react-router#whats-it-look-like
Answer
Your
window.Router = window.ReactRouter;
should be
window.Router = window.ReactRouter.Router;
You're getting the error because you're trying to use <Router />
, but Router
is a reference to the React Router library (and not the Router
component).
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?