I have simple Hello World App with one route no child route or index route. For routing i using plain routes instead of jsx sysntax. Again i am using react-router's dynamic routing to load Hello component with 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")
);
Hello.jsx component has the following code
import React from "react";
export default class Hello extends React.Component {
render() {
return (
<h2>Hello World</h2>
)
}
}
This error happens because webpack doesn't support es6 modules
if you are using babel to transpile es6 code then use the default keyword like
require('./components/Hello').default
so the routes will be
const routes = [{
path:"/",
getComponents(location, callback) {
require.ensure([], function (require) {
callback(null, require('./components/Hello').default)
})
}
}];
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With