React Router with React v0.14.3

Question

I am building an application using React and Material-UI, I have also included React-router. But I get the error below ( Uncaught TypeError: (0, _reactDom.ReactDOM) is not a function ) when I run my application.

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

BodyComponent, I wrote in another file, and I import it into my main.js

I tried ReactDOM.render, but I became below error

Unfixed error: invariant violation: element type is invalid: expected string (for built-in components) or class / function (for composite components), but received: object.

I created a 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 are 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" } 

Answer 1

ReactDOM.render( ... )

You just missed the render call

Answer 2

I think you forgot to call the render method.

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

Answer 3

There are two problems that I see here:

• As the previous answers ReactDOM.render( ... ) , you will need a call to ReactDOM.render( ... ) .
• The error you see relates to the import of what was not exported the way you referred to it. Make sure that you export and import your component correctly, i.e. In your component file, export BodyComponent , import and use it as BodyComponent . Hope my senior answer can help!

Answer 4

You have the wrong import:

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

it should be

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

Answer 5

You forgot the rendering method ReactDom.render()