Babel continues to encounter issues with async/await syntax, even with all the necessary presets and plugins installed

Question

Babel continues to encounter issues with async/await syntax, even with all the necessary presets and plugins installed

I am encountering a compiler error while attempting to compile an async/await function using Babel.

Below is the function in question:

async function login(username, password) {
  try {
    const response = await request
      .post("/api/login")
      .set("Accept", "application/json")
      .send({username, password})
      .end();

    const {user} = response.body;
    console.log("Login success:", user);
    this.user = user;
    this.loginError = null;
  } catch(error) {
    console.log(`Login failed: ${error}`);
    this.user = null;
    this.loginError = error;
  }
}

The error message received is as follows:

ERROR in ./src/store/store.js
Module parse failed: /home/james/projects/Issue-Tracker/node_modules/babel-loader/index.js!/home/james/projects/Issue-Tracker/src/store/store.js The keyword 'await' is reserved (20:25)
You may need an appropriate loader to handle this file type.
SyntaxError: The keyword 'await' is reserved (20:25)
    at Parser.pp$4.raise (/home/james/projects/Issue-Tracker/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$3.parseIdent (/home/james/projects/Issue-Tracker/node_modules/acorn/dist/acorn.js:2182:14)
    ... (remaining error log omitted for brevity)

Additionally, here is my .babelrc configuration:

{
  "presets": ["latest", "react"],
  "plugins": ["transform-decorators-legacy", "transform-object-rest-spread", "transform-class-properties"]
}

Although the documentation for babel-preset-latest suggests that it should handle transform-async-to-generator with preset-es2017, I am still facing compilation issues. Any insights or assistance on resolving this problem would be highly appreciated.

javascript async-await babeljs

Answer 1

Answer №1

Dependencies in package.json

{
  "dependencies": {
    "babel-cli": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.16.0",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0"
  }
}

Babel Configuration in .babelrc

{
  "presets": ["latest", "react"],
  "plugins": [
    "transform-decorators-legacy",
    "transform-object-rest-spread",
    "transform-class-properties"
   ]
}

If you want to build a file named file.js using Babel, run the following command:

$ node_modules/.bin/babel file.js -o output.js

The contents of output.js will be:

"use strict";

var login = function () {
  var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(username, password) {
    var response, user;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return request.post("/api/login").set("Accept", "application/json").send({ username: username, password: password }).end();

          case 3:
            response = _context.sent;
            user = response.body.user;

            console.log("Login success:", user);
            this.user = user;
            this.loginError = null;
            _context.next = 15;
            break;

          case 10:
            _context.prev = 10;
            _context.t0 = _context["catch"](0);

            console.log("Login failed: " + _context.t0);
            this.user = null;
            this.loginError = _context.t0;

          case 15:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, this, [[0, 10]]);
  }));

  return function login(_x, _x2) {
    return _ref.apply(this, arguments);
  };
}();

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

Answer 2

Dependencies in package.json

{
  "dependencies": {
    "babel-cli": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.16.0",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0"
  }
}

Babel Configuration in .babelrc

{
  "presets": ["latest", "react"],
  "plugins": [
    "transform-decorators-legacy",
    "transform-object-rest-spread",
    "transform-class-properties"
   ]
}

If you want to build a file named file.js using Babel, run the following command:

$ node_modules/.bin/babel file.js -o output.js

The contents of output.js will be:

"use strict";

var login = function () {
  var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(username, password) {
    var response, user;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return request.post("/api/login").set("Accept", "application/json").send({ username: username, password: password }).end();

          case 3:
            response = _context.sent;
            user = response.body.user;

            console.log("Login success:", user);
            this.user = user;
            this.loginError = null;
            _context.next = 15;
            break;

          case 10:
            _context.prev = 10;
            _context.t0 = _context["catch"](0);

            console.log("Login failed: " + _context.t0);
            this.user = null;
            this.loginError = _context.t0;

          case 15:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, this, [[0, 10]]);
  }));

  return function login(_x, _x2) {
    return _ref.apply(this, arguments);
  };
}();

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

Babel continues to encounter issues with async/await syntax, even with all the necessary presets and plugins installed

Answer №1

Dependencies in package.json

Babel Configuration in .babelrc

Similar questions

Enhancing w3-import-html with JavaScript

Troubleshooting a Node.js problem with variable scope

Angular.js enables seamless synchronization between contenteditable elements and the $scope object by automatically updating the

using ng-show to display array elements

What is the best way to initialize a value asynchronously for React context API in the latest version of NextJS, version

Is there a way to override the JSON.stringify method within the JSON class of a TypeScript project without using a custom call?

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

I'm having trouble getting the JADE tag to render in Express script. Can anyone help me

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

What is the best method to center a div on the screen?

The Markdown-to-jsx tool is having trouble processing the provided source code

Is it possible to assign multiple ID's to a variable in jQuery?

Updating a div using PHP elements

Struggling with obtaining react-modal in my React Component

Creating stylish error labels using Materialize CSS

Steps for including a path to a base64 encoded image

A guide on how to assign a placeholder as the default value for a date picker

Oops! SAPUI5 is encountering an issue with reading property '0' of undefined

Protecting String in PHP to Utilize in JavaScript

Is it possible to generate a triangular attachment below a div element?