Arrow functions not working inspite of babel

Question

I am trying to setup a project using loopback 4 and when I write an arrow function, it gives this error. It seems that the es6 code isn't being converted back to es5, hence the arrow function error. I've tried deleting all babel dependencies and trying it again, still it doesn't work.

executeStep = () => {
            ^
SyntaxError: Unexpected token =

I'm using babel 7 for this project.

Here's my package.json

{
  "name": "applicationName",
  "version": "1.0.0",
  "description": "applicationDescription",
  "keywords": [
    "loopback-application",
    "loopback"
  ],
  "main": "index.js",
  "engines": {
    "node": ">=8.9"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "esmodules": true
          }
        }
      ]
    ]
  },
  "scripts": {
    "build": "lb-tsc && babel src -s -d dist",
    "build:watch": "lb-tsc --watch",
    "clean": "lb-clean dist *.tsbuildinfo",
    "lint": "npm run prettier:check && npm run eslint",
    "lint:fix": "npm run eslint:fix && npm run prettier:fix",
    "prettier:cli": "lb-prettier \"**/*.ts\" \"**/*.js\"",
    "prettier:check": "npm run prettier:cli -- -l",
    "prettier:fix": "npm run prettier:cli -- --write",
    "eslint": "lb-eslint --report-unused-disable-directives .",
    "eslint:fix": "npm run eslint -- --fix",
    "pretest": "npm run clean && npm run build",
    "test": "lb-mocha --allow-console-logs \"dist/__tests__\"",
    "posttest": "npm run lint",
    "test:dev": "lb-mocha --allow-console-logs dist/__tests__/**/*.js && npm run posttest",
    "docker:build": "docker build -t orchestrator .",
    "docker:run": "docker run -p 3000:3000 -d orchestrator",
    "migrate": "node ./dist/migrate",
    "prestart": "npm run build",
    "start": "node -r source-map-support/register . && nodemon --exec npm run babel-node -- ./index.js",
    "prepublishOnly": "npm run test"
  },
  "repository": {
    "type": "git"
  },
  "author": "",
  "license": "",
  "files": [
    "README.md",
    "index.js",
    "index.d.ts",
    "dist",
    "src",
    "!*/__tests__"
  ],
  "dependencies": {
    "@loopback/boot": "^1.5.5",
    "@loopback/context": "^1.22.1",
    "@loopback/core": "^1.10.1",
    "@loopback/openapi-v3": "^1.9.6",
    "@loopback/repository": "^1.13.1",
    "@loopback/rest": "^1.18.1",
    "@loopback/rest-explorer": "^1.3.6",
    "@loopback/service-proxy": "^1.3.5",
    "babel-polyfill": "^6.26.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-arrow-functions": "^7.2.0",
    "@babel/preset-env": "^7.6.0",
    "@loopback/build": "^2.0.10",
    "@loopback/eslint-config": "^4.0.2",
    "@loopback/testlab": "^1.8.0",
    "@types/node": "^10.14.17",
    "@typescript-eslint/eslint-plugin": "^2.1.0",
    "@typescript-eslint/parser": "^2.1.0",
    "blue-tape": "^1.0.0",
    "eslint": "^6.3.0",
    "eslint-config-prettier": "^6.2.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-eslint-plugin": "^2.1.0",
    "eslint-plugin-mocha": "^6.1.0",
    "jest": "^24.9.0",
    "source-map-support": "^0.5.13",
    "typescript": "~3.6.2"
  }
}

Here's my babel.config.js file

module.exports = {
  presets: ["@babel/preset-env"],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-arrow-functions"
  ]
}

and here's the piece of code that's giving me the error

executeStep = () => {
    //some steps
}

Here is the error log

 executeStep = () => {
                ^

SyntaxError: Unexpected token =
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)

Are you sure you need an equal to there? If this function is defined inside an object then its a colon that must be used, like this: let objFunctions = { executeStep: () =>{} } — Helper, Sep 12 '19 at 05:05
This is a function inside a class. This is how it is defined in ES6 — Samarth Juneja, Sep 12 '19 at 05:17
Thank you for mentioning the same, then have you tried the keyword 'this'? while declaring the function? — Helper, Sep 12 '19 at 05:19
Are you sure the Babel config is being used? Is the file throwing the error in `node_modules` by chance? Are you sure Babel is actually set up to run in whatever context you're using this code in? — loganfsmyth, Sep 12 '19 at 07:04

score 0 · Answer 1 · answered Sep 12 '19 at 04:48

0

You can use this

var executeStep = () => {
    //some steps
}

answered Sep 12 '19 at 04:48

Woadud Akand

520
1
4
13

When I use it, I get this error ``` Unexpected token. A constructor, method, accessor, or property was expected. ``` I have this function inside a class which is being called in the index.js file – Samarth Juneja Sep 12 '19 at 04:54
if you add this on class, you can use it without variable – Woadud Akand Sep 12 '19 at 05:02

score 0 · Answer 2 · answered Sep 12 '19 at 07:20

You'll need to include babel-transform-class-properties

In your example, you'll need to:

npm install --save-dev babel-plugin-transform-class-properties

After successfully installation you need to modify your loader

{
   test: /\.js$/,
   loader: 'babel-loader',
   exclude: /node_modules/,
   query: {
      presets: ['react', 'es2015', 'react-hmre'],
      plugins: ['transform-class-properties']
   }
}

Using above my problem was solved. Bellow mention threads are very usefull to me solve this issue in my project.

Source One Source Two

Arrow functions not working inspite of babel

2 Answers2