Error: The root route must render a single element Re

Question

I am new all around React and i am trying to using a simple tutorial for login and signup. currently the server is up but in the browser i get the follwing erros and warnings:

    Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
Warning: RouterContext: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
 Uncaught Error: The root route must render a single element
at invariant (app.js:1431)
at Object.render (app.js:9338)
at app.js:31715
at measureLifeCyclePerf (app.js:30994)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (app.js:31714)
at ReactCompositeComponentWrapper._renderValidatedComponent (app.js:31741)
at ReactCompositeComponentWrapper.performInitialMount (app.js:31281)
at ReactCompositeComponentWrapper.mountComponent (app.js:31177)
at Object.mountComponent (app.js:4009)
at ReactCompositeComponentWrapper.performInitialMount (app.js:31290)

i am not sure what is the problem, route.js:

    /**
 * Created by matant on 23/04/17.
 */
import Base from './components/Base.jsx';
import HomePage from './components/HomePage.jsx';
import LoginPage from './containers/LoginPage.jsx';
import SignUpPage from './containers/SignUpPage.jsx';


const routes = {
    // base component (wrapper for the whole application).
    component: Base,
    childRoutes: [

        {
            path: '/',
            component: HomePage
        },

        {
            path: '/login',
            component: LoginPage
        },

        {
            path: '/signup',
            component: SignUpPage
        }

    ]
};

export default routes;

Base.jsx:

 import React from 'react';
import { Link, IndexLink } from 'react-router';
import PropTypes from 'prop-types';

const Base = ({ children }) => (
    <div>
        <div className="top-bar">
            <div className="top-bar-left">
                <IndexLink to="/">React App</IndexLink>
            </div>

            <div className="top-bar-right">
                <Link to="/login">Log in</Link>
                <Link to="/signup">Sign up</Link>
            </div>

        </div>

        {children}

    </div>
);

Base.propTypes = {
    children: PropTypes.object.isRequired
};

HomePage:

 import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';


const HomePage = () => (
    <Card className="container">
        <CardTitle title="React Application" subtitle="This is the home page." />
    </Card>
);

export default HomePage;

maybe one of the packages is deprecated but i am nut sure about that: package.json:

 {
  "name": "grocery",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --use_strict index.js",
    "bundle": "webpack"
  },
  "author": "matant",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.17.1",
    "create-react-class": "^15.5.2",
    "express": "^4.15.2",
    "material-ui": "^0.17.4",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^3.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "validator": "^7.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.11.0",
    "webpack": "^2.4.1"
  }
}

Possible duplicate of [Invariant Violation: The root route must render a single element error in react-router 2 dynamic routing](http://stackoverflow.com/questions/36194806/invariant-violation-the-root-route-must-render-a-single-element-error-in-react) — Chris, Apr 24 '17 at 09:01

score 1 · Accepted Answer · answered Jun 23 '17 at 00:01

This error happens because webpack doesn't support es6 modules. Since you're using babel to transpile es6 code then use the '.default' keyword.

import Base from './components/Base.jsx'.default;

I can't take credit for this answer, but had the same issue and found this: https://stackoverflow.com/a/36198146/6088475

h/t: @Manas

Error: The root route must render a single element Re

1 Answers1