'Uncaught SyntaxError: Unexpected token =' on optional parameter

[katsuragi545]

I'm trying to add ngrx/store to my Angular app. A lot of tutorials/introductions go over a simple counter with a reducer function that looks like:

export const counter = (state = 0, action) => {
    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
        case "RESET":
            return state = 0;
    }
}

Whenever I run my app, I get the following error:

Uncaught SyntaxError: Unexpected token =

Does anyone know why this is happening? It complains about the second '=' sign, the optional parameter. Almost every ngrx/store counter tutorial I've seen uses this function syntax, yet my system throws an error.

[giwiro]

Which version of Node.js are you using ?

[katsuragi545]

@giwiro

My Node.js version is 6.9.1.

My npm version is 4.0.3.

My Typescript version is 2.2.1.

[giwiro]

Can you try updating your node version to the latests (v8.1.4 i think) ?

[katsuragi545]

@giwiro I've seen a working example from someone on Stack Overflow who used Node 7.7.1. I've updated to that one and I still get the same error. Do you happen to know what version of angular I should be using? Here is my package.json file:

{
  "name": "testProj",
  "version": "4.0.0",
  "dependencies": {
    "@angular/common": "2.2.4",
    "@angular/compiler": "2.2.4",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "2.2.4",
    "@angular/forms": "2.2.4",
    "@angular/http": "2.2.4",
    "@angular/platform-browser": "2.2.4",
    "@angular/platform-browser-dynamic": "2.2.4",
    "@angular/platform-server": "2.2.4",
    "@angular/router": "3.2.4",
    "@angular/upgrade": "2.2.4",
    "@ngrx/core": "1.2.0",
    "@ngrx/store": "2.2.1",
    "angular2-in-memory-web-api": "0.0.21",
    "core-js": "^2.4.1",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "font-awesome": "^4.7.0",
    "less": "^2.5.3",
    "lodash": "^3.10.1",
    "moment": "^2.14.1",
    "paper": "^0.9.25",
    "primeng": "^2.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "ts-loader": "^0.7.2",
    "typings": "^1.3.2",
    "zone.js": "^0.6.17"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^0.3.3",
    "css-loader": "^0.23.0",
    "del": "^2.0.2",
    "event-stream": "^3.3.1",
    "exports-loader": "0.6.2",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.8.4",
    "gulp": "^3.9.0",
    "html-webpack-plugin": "^1.7.0",
    "http-server": "^0.8.5",
    "imports-loader": "^0.6.4",
    "istanbul-instrumenter-loader": "^0.1.3",
    "json-loader": "^0.5.3",
    "nodemon": "^1.8.1",
    "phantomjs": "^1.9.18",
    "phantomjs-polyfill": "0.0.1",
    "protractor": "^3.0.0",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.5.1",
    "rimraf": "^2.4.4",
    "style-loader": "^0.13.0",
    "ts-helper": "0.0.1",
    "tsconfig-lint": "^0.4.3",
    "tslint": "^3.2.0",
    "tslint-loader": "^2.1.0",
    "typedoc": "^0.3.12",
    "typescript": "2.2.1",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.12.1",
    "webpack-md5-hash": "0.0.4"
  },
  "scripts": {
    "tsc": "tsc -p . -w",
    "start": "nodemon --ignore htm,html --ext cs,js --exec \"dotnet run --debug\" -V",
    "static": "gulp deploy-client",
    "static-watch": "nodemon --watch ./client --ext html,css --exec \"gulp deploy-client\" -V",
    "webpack": "webpack",
    "webpack-watch": "webpack --watch",
    "webpack-mrt": "webpack --config webpack-mrt.config.js",
    "webpack-mrt-watch": "webpack --config webpack-mrt.config.js --watch",
    "clean": "gulp cleanwww",
    "build": "npm run static && npm run webpack"
  }
}

[5c0r]

Hello,
Could you tell me what browser are you using for running the app ? I once got this problem while using Microsoft Edge / IE.

Hope that helps ;)

[katsuragi545]

@nmt1994 I'm using Chrome.

[katsuragi545]

I've upgraded to Angular 4, and I'm still getting the same error. This is my current package.json:

{
  "name": "nexus",
  "version": "4.0.0",
  "dependencies": {
    "@angular/animations": "~4.2.0",
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/compiler-cli": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/platform-browser-dynamic": "~4.2.0",
    "@angular/platform-server": "~4.2.0",
    "@angular/router": "~4.2.0",
    "@angular/tsc-wrapped": "~4.2.0",
    "@angular/upgrade": "~4.2.0",
    "angular-in-memory-web-api": "~0.3.2",

    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^2.2.3",

    "core-js": "^2.4.1",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "font-awesome": "^4.7.0",
    "less": "^2.5.3",
    "lodash": "^3.10.1",
    "moment": "^2.14.1",
    "paper": "^0.9.25",
    "primeng": "^4.1.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.1",
    "systemjs": "0.19.39",
    "ts-loader": "^0.7.2",
    "typings": "^1.3.2",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^0.3.3",
    "css-loader": "^0.23.0",
    "del": "^2.0.2",
    "event-stream": "^3.3.1",
    "exports-loader": "0.6.2",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.8.4",
    "gulp": "^3.9.0",
    "html-webpack-plugin": "^1.7.0",
    "http-server": "^0.8.5",
    "imports-loader": "^0.6.4",
    "istanbul-instrumenter-loader": "^0.1.3",
    "json-loader": "^0.5.3",
    "nodemon": "^1.8.1",
    "phantomjs": "^1.9.18",
    "phantomjs-polyfill": "0.0.1",
    "protractor": "^3.0.0",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.5.1",
    "rimraf": "^2.4.4",
    "style-loader": "^0.13.0",
    "ts-helper": "0.0.1",
    "tsconfig-lint": "^0.4.3",
    "tslint": "^3.2.0",
    "tslint-loader": "^2.1.0",
    "typedoc": "^0.3.12",
    "typescript": "2.2.1",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.12.1",
    "webpack-md5-hash": "0.0.4"
  },
  "scripts": {
    "tsc": "tsc -p . -w",
    "start": "nodemon --ignore htm,html --ext cs,js --exec \"dotnet run --debug\" -V",
    "static": "gulp deploy-client",
    "static-watch": "nodemon --watch ./client --ext html,css --exec \"gulp deploy-client\" -V",
    "webpack": "webpack",
    "webpack-watch": "webpack --watch",
    "webpack-mrt": "webpack --config webpack-mrt.config.js",
    "webpack-mrt-watch": "webpack --config webpack-mrt.config.js --watch",
    "clean": "gulp cleanwww",
    "build": "npm run static && npm run webpack"
  }
}

[katsuragi545]

@giwiro @nmt1994 Okay, I believe this is related to my tsconfig.json, not package.json. I'm using:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "types" : []
  },
  "exclude": [
    "node_modules"
  ]
}

As you can see, I am using es6 as my target in compilerOptions. Every example I've seen has been using es5. I downgraded es6 to es5 in my tsconfig.json and the error no longer occurs (though now I get some errors which are a result of the downgrade, but unrelated to ngrx).