Node/React: Node Failing to Parse ES6 Syntax of Isomorphic Components - node.js

Question

Tools: Node 5.4.0, Express 4.13.4, React 0.14.7, webpack 1.12.14
Problem:
Both Node and Babel have had major updates over the past couple months and
so I'm having trouble straightening out how to configure Node to parse Isomorphic components written in ES6 syntax.
Error:
Client-side rendering(bundled by webpack) is working, but during server-side rendering I get this issue
import MyComponent from './components/
^^^^^^
SyntaxError: Unexpected token import
Background - things I did:
1) Updated Babel
I figured that the newest versions of Node would natively been to parse ES6 syntax for importing, but since it didn't I figured updating babel to
6.x would do the trick.
So I updated babel-loader 6.2.4 and other modules that depend on it.
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
2) Created a .babelrc file
I didn't know exactly what this file was for but since many people used it and mentioned it I thought I'd throw it in there.
.babelrc
{
"presets":["react","es2015"]
}
3) Updated Webpack Queries
I figure this only affects the client-side rendering but I'll mention that I did update
by adding in the "presets".
webpack.config.js
module.exports = {
entry: "./js/app.js",
output: {
filename: "./public/js/bundle.js"
},
debug: true,
devtool: "source-map",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query:{
presets:['react','es2015']
}
}
]
},
};
Just to incase it helps:
Here is my list of my dependencies.
{
"name": "My App",
"version": "0.0.1",
"description": "Iso React Components",
"main": "app.js",
"dependencies": {
"classnames": "^2.1.3",
"express": "^4.13.3",
"express-handlebars": "~1.1.0",
"flux": "^2.0.0",
"history": "^1.13.0",
"html-webpack-plugin": "^2.9.0",
"keymirror": "~0.1.0",
"mongodb": "^2.1.3",
"node-jsx": "~0.12.4",
"object-assign": "^1.0.0",
"react": "^0.14.0",
"react-dom": "^0.14.0",
"react-router": "^2.0.0",
"react-scrollbar": "0.3.1",
"reactify": "^1.1.1"
},
"devDependencies": {
"babel-core": "^6.6.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"envify": "^3.0.0",
"jest-cli": "^0.4.3",
"node-libs-browser": "^0.5.2",
"uglify-js": "~2.4.15",
"webpack": "^1.12.1"
}
}
Question:
Once I switched out all the "import" syntax to Node require statements I was able to render server-side successfully. But I really don't like the idea of avoiding ES6 to make the React code Node/Browser compatible. What am I missing?

Answer 1

Take a look at Webpack Isomorphic Tools. It's a helper module you can add to your webpack config so that you can do ES6 imports or regular old requires in node and it'll do some magic and the require will resolve successfully.
Essentially you make an isomorphic config (which is detailed on the site) and then using the isomorphic webpack plugin, you can use it to render your assets (javascript, styles, etc) client side.
Edit: A word of caution of some bugs you may run into: In node, things like the window object don't exist so if any of your node modules use it, it will throw an exception when you try to render that particular library on the server. Just shim the window object and anything else you need.

Answer 2

Babel require hook could help node.js parse ES6 syntax automatically while require files.
Just run command
npm install babel-register --save
And add the following to the first line of your entry file
require("babel-register");