React Router with React v0.14.3

Question

I am creating an app using React and Material-UI, i have included the React-router as well. But i get the below error (Uncaught TypeError: (0 , _reactDom.ReactDOM) is not a function) when i run my App.

I am using React v0.14.3 and React-Router v1.0.2

BodyComponent i have written in a different file and i import it to my main.js

I tried ReactDOM.render but i get below error

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.

I have Created fiddle for the same :

https://jsfiddle.net/69z2wepo/23814/

Below is my code : (updated Code)

'use strict';
import React from 'react';
import mui from 'material-ui';
import PhysicalView from './playground/PhysicalViewComponent';
import DataTable from './DataTableComponent';
const AppBar = require('material-ui/lib/app-bar');
require('styles//Body.sass');

const LeftNav = require('material-ui/lib/left-nav');

const MenuItem = mui.MenuItem;
const injectTapEventPlugin = require('react-tap-event-plugin');
injectTapEventPlugin();


var menuItems = [{
  route: 'device-view',
  text: 'Device'
}, {
  type: MenuItem.Types.SUBHEADER,
  text: '123'
}, {
  route: 'ola',
  text: 'ola'
}, {
  route: 'bridges',
  text: 'Bridges'
}, {
  route: 'interf',
  text: 'interf'
}, {
  type: MenuItem.Types.LINK,
  payload: 'https://github.com/callemall/material-ui',
  text: 'GitHub'
}, {
  text: 'Disabled',
  disabled: true
}, {
  type: MenuItem.Types.LINK,
  payload: 'https://www.google.com',
  text: 'Disabled Link',
  disabled: true
}];


class BodyComponent extends React.Component {

  _toggleMenu() {
    this.refs.leftNav.toggle();
  }

  render() {
    return (
      < div className = "body-component" >

      < header >

      < AppBar
      title = "vEDM"onLeftIconButtonTouchTap = {
          this._toggleMenu.bind(this)
       }
      iconClassNameRight = "muidocs-icon-navigation-expand-more" / >

      < /header>

      < LeftNav
      ref = "leftNav"
      docked = {
        false
      }
      //openRight = { true }
      menuItems = {
        menuItems
      }
      />

    <DataTable />


    < /div>
  );
}
}

BodyComponent.displayName = 'BodyComponent'

export default BodyComponent;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import mui from 'material-ui';
import Body from './BodyComponent';
import  Router  from 'react-router';
import Route from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
let history = createBrowserHistory();


ReactDOM.render((
    <Router history={history}>
      <Route path="/" component={Body} />
    </Router>
), document.getElementById('app'))

Below is my package.json dependencies

"dependencies": {
    "history": "^1.13.1",
    "lodash": "^3.10.1",
    "material-ui": "^0.13.4",
    "normalize.css": "^3.0.3",
    "react": "^0.14.0",
    "react-addons-test-utils": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-router": "^1.0.2",
    "react-tap-event-plugin": "^0.2.1",
    "vis": "^4.10.0"
  }

score 3 · Answer 1 · answered Dec 11 '15 at 13:00

3

ReactDOM.render( ... )

You just missed the render call

answered Dec 11 '15 at 13:00

Matt Styles

2,442
1
18
23

hey when i use .render i get these error : 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. – Sharath Bangera Dec 11 '15 at 13:08
Looks like the error is further down the render path, I'd recheck the docs for React-Router and then strip all of your components down. Get them just to render a span, when that works, then add back your components. There are better ways to trace the render graph but this is the simplest conceptually. – Matt Styles Dec 11 '15 at 15:28

score 3 · Answer 2 · answered Dec 11 '15 at 13:00

3

I think you forgot to call the render method.

ReactDOM.render((
    <Router history={history}>
        <Route path="/" handler={Body} />
    </Router>
), document.getElementById('app'))

answered Dec 11 '15 at 13:00

Gian Marco Toso

11,676
5
29
38

hey when i do that i get this error (forgot to mention it in my question ): 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. – Sharath Bangera Dec 11 '15 at 13:10
Have you tried replacing `handler` with `component`? – Gian Marco Toso Dec 11 '15 at 16:24
@juandermarco Can you please tell me how to do it ? i am using react and yeoman for the first time. – Sharath Bangera Dec 12 '15 at 11:28
changed to component but still getting same issue : 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. – Sharath Bangera Dec 12 '15 at 12:28

score 1 · Answer 3 · edited May 23 '17 at 11:47

1

There are two problems I see here:

As the previous answers suggest, you'll need a ReactDOM.render( ... ) call.
The error you're seeing refers to importing something that hadn't been exported the way you refer to it. Make sure you correctly export and import your component, i.e. in your component file, export BodyComponent, import and use it as BodyComponent. Hope my older answer can help!

edited May 23 '17 at 11:47

Community

1
1

answered Dec 11 '15 at 13:27

Jan Klimo

4,643
2
36
42

1. I am using .render now. 2) BodyComponent is exported properly. without router i can display my Bodycomponent in browser. you can go through the jsfiddle that i have shared. – Sharath Bangera Dec 11 '15 at 13:37
Can you make the code from your `BodyComponent.jsx` a part of your question, so we can see the whole picture? How is it exported? – Jan Klimo Dec 11 '15 at 13:43
2

Interesting. What `react-router` version are you using? Since you are using `handler` and not `component`, it looks like something older than 1.0. In that case, you'll need something along the lines of `import Router from 'react-router'; import { Route } from 'react-router';` (the module was structured differently before 1.0) – Jan Klimo Dec 11 '15 at 14:43
i am using latest react-router, but i have done the same way how they mentioned in their github page. – Sharath Bangera Dec 12 '15 at 11:29
1

You'll need `import { Router, Route } from 'react-router';` with v1.0. – Jan Klimo Dec 12 '15 at 12:40
i am doing `import Router from 'react-router'; import Route from 'react-router';` isn't this same as what you told ? anyway i tried both, but same error – Sharath Bangera Dec 12 '15 at 13:22
No, they are different. If `import { Router, Route } from 'react-router';` does not work, some other component is being imported incorrectly. Try importing your components/modules one by one and see which one breaks it. – Jan Klimo Dec 12 '15 at 14:38

score 0 · Answer 4 · answered Feb 08 '16 at 08:18

0

You have wrong imports:

import  Router  from 'react-router';
import Route from 'react-router';

must be

import { Router, Route }  from 'react-router';

answered Feb 08 '16 at 08:18

ikhilko

1
2

score 0 · Answer 5 · answered May 26 '16 at 07:36

0

You forgot the render method ReactDom.render()

answered May 26 '16 at 07:36

Aatif Bandey

1,193
11
14

React Router with React v0.14.3

5 Answers5