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.

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;
0

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.

2

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.

6

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Elena Rostova

Elena Rostova

Lead Health, Wellness & Medical Journalist

Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.

Share this article
Twitter Facebook Pinterest