Webpack + React + Node - error “Unexpected token import”

Question

I'm newbie to Reactjs and webpack. I'm trying to do a sample app using Node and React. I have chosen Webpack as module bundler.
This is my project structue
Project

|--index.html  
|--package.json  
|--server.js  
|--webpack.config.js  
|--app/main.js    
|--app/routes.js    
|--app/components/login.js  

Contents of package.json

 { "version": "1.0.0", "description": "learn", "main": "server.js", "dependencies": { "body-parser": "^1.14.1", "bootstrap": "^3.3.7", "express": "^4.14.0", "react": "^15.3.2", "react-dom": "^15.3.2", "react-router": "^2.8.1" }, "devDependencies": { "babel-cli": "^6.16.0", "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.16.0", "babel-preset-react": "^6.1.18", "babel-register": "^6.3.13", "babelify": "^7.2.0", "nodemon": "^1.11.0", "webpack": "^1.13.2" }, "scripts": { "watch": "nodemon server.js", "start": "node server.js" } } 

Contents of webpack.config.js

 module.exports = { context: __dirname + "/app", entry: "./main.js", output: { filename: "./build/bundle.js" }, resolve: { extensions: ['', '.js', '.jsx'] }, module: { loaders: [ { test: /\\.jsx?$/, exclude: /node_modules/, loader: "babel", query: { presets: ['react', 'es2015'] } } ] } } 

server.js

 var express = require('express'); var path = require('path'); var React = require('react'); var ReactDOM = require('react-dom'); var Router = require('react-router'); var routes = require('./app/routes'); var app = express(); app.set('port', process.env.PORT || 3000); app.listen(app.get('port'), function() { console.log('Express server listening on port ' + app.get('port')); }); app.get('/',function(req, res) { res.send('Hello'); }); app.get('/login',function(req, res) { res.send('Login page using react'); }); 

main.js

 import React from 'react'; import Router from 'react-router'; import ReactDOM from 'react-dom'; import routes from './routes'; ReactDOM.render(<Router>routes</Router>, document.getElementById('app')); 

routes.js

 import React from 'react'; import {Route} from 'react-router'; import Login from './components/login'; //import Home from './components/Home'; export default ( <Route path="/login" component={Login}> </Route> ); 

login.js

 import React from 'react'; import ReactDOM from 'react-dom'; class Login extends React.Component { render() { return ( <div className="container"> <div className="row"> <div className="col-sm-5"> <strong>Username</strong> </div> <div className="col-sm-5"> <input type='text' className='form-control'/> </div> </div> </div> ) } } export default Login; 

When I do "webpack -w" seems to be working fine.

when trying to start node using "npm start", says   

    /Project/app/routes.js:1  
    (function (exports, require, module, __filename, __dirname) { import React from 'react';  ^^^^^^
    SyntaxError: Unexpected token import  

I have no idea about why node is not picking up babel's import? Couldn't find anything on the internet and hence posting this question. I badly need a help.

Thanks in advance.

Answer 1

Your webpack config only transpiles (and bundles) your frontend code. When you type npm start , node.js will execute server.js , which then includes your JSX source. Node does not support ES6 modules yet, so that's why it fails with a syntax error.

You can use the Babel require hook to automatically transpile the code for node. Don't forget to specify the 'es2015' and 'react' presets in the options.