Npm Run Serve Not Running the Project in React Js with Webpack Environment
I'm Trying to Route Some Component in React Js. So I Install Npm Install Serve --Save-Dev. After I Run This Comment " Npm Run Serve I'm Getting Some Errors...
I'm trying to route some component in react js. So I install npm install serve --save-dev. After I run this comment "
npm run serve
I'm getting some errors.
Here my package file.
{
"name": "routing",
"version": "1.0.0",
"description": "routing test",
"main": "index.js",
"scripts": {
"watch": "webpack -d --watch",
"build": "webpack",
"serve" : "serve ./public"
},
"author": "VJ",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"serve": "^5.0.2",
"webpack": "^2.2.1"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^4.0.0"
}
}
Here my web packs file
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'src');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
Loaders: [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
}
]
}
};
module.exports = config;
2 Answers
You're running an old Node.js version that doesn't support Destructuring.
The package serve uses that feature, so you need at least Node.js version 6, which is the current LTS. It even says it in its README and it's also specified in the package.json.
The easiest and the best solution is to upgrade Node.js. Alternatively you could transpile the module with babel, but that's rather inconvenient.
You need to compile from ES6 to ES5 first.
For reference, user should add babel-preset-es2015 package as you already did.
npm install babel-preset-es2015
Then, create a .babelrc with the following:
{
"presets":
[
"es2015",
...
]
}
Note: By default, latest version of node supports ES6 Destruction. So, updating node version may help with your issue.