Kothuri Kanaka Valli Kothuri Kanaka Valli - 1 month ago 50
Node.js Question

Webpack + React + Node - error "Unexpected token import"

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

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.