Invariant violation: the root route should display a single element error in dynamic routing response-router 2

Question

I have a simple Hello World application with one route route without a route or pointer. For routing, I use simple routes instead of jsx sysntax. Again, I use dynamic-router dynamic routing to load the Hello component using webpack. My app.jsx file has the following code .

import React from "react"; import ReactDOM from "react-dom"; import {Router, browserHistory} from "react-router"; import Hello from "./components/Hello"; const routes = [{ path:"/", getComponents(location, callback) { require.ensure([], function (require) { callback(null, require('./components/Hello')) }) } }]; ReactDOM.render( <Router history={browserHistory} routes={routes}/>, document.getElementById("container") ); 

The Hello.jsx component has the following code

 import React from "react"; export default class Hello extends React.Component { render() { return ( <h2>Hello World</h2> ) } } 

Answer 1

This error occurs because webpack does not support es6 modules

if you use babel to forward es6 code use the default keyword like

 require('./components/Hello').default 

therefore the routes will be

 const routes = [{ path:"/", getComponents(location, callback) { require.ensure([], function (require) { callback(null, require('./components/Hello').default) }) } }];