npm run serve not running the project in react js with webpack environment

Question

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;

Mouneer · Answer 1 · 2017-03-12T11:32:00.217

0

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.

edited Mar 12 '17 at 11:32

answered Mar 11 '17 at 11:49

Mouneer

12,827
2
35
45

Even .babelrc file? – Mouneer Mar 11 '17 at 12:04
You check my package file, in the above attached! – Mar 11 '17 at 12:04
Yeah I have a .babelrc file. – Mar 11 '17 at 12:05
Ok please mention your babelrc configuration – Mouneer Mar 11 '17 at 12:09
{ "presets" : ["es2015", "react"] } – Mar 11 '17 at 12:17
Ok check your node version. `node --version` – Mouneer Mar 11 '17 at 12:33

score 0 · Answer 2 · answered Mar 11 '17 at 12:05

0

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.

answered Mar 11 '17 at 12:05

Michael Jungo

31,583
3
91
84

I check my node version "node -v" in my node cmd. My version is v4.3.2. I think this is latest version. – Mar 11 '17 at 12:23
This is not the latest version. Current LTS is `v6.10.0` and current latest is `v7.7.2`. You're 2 to 3 major versions behind. See [Node.js](https://nodejs.org/en/) and the [LTS schedule](https://github.com/nodejs/LTS#lts-schedule). Node 4 is about to enter maintenance, where only critical security patches are applied. – Michael Jungo Mar 11 '17 at 12:25

npm run serve not running the project in react js with webpack environment

2 Answers2