*ESLint Error* in React when trying to deploy Firebase Functions

Question

Setting up a serverless backend using Firebase Functions. Tutorials I watched setting up the Functions folder all recommended using the ESLint feature to catch probable bugs and enforce style. POST lambda route notified a parsing error when locally deployed but everything still worked as needed. I go to deploy the backend to Firebase and I'm thrown a bunch of errors - thus not letting me continue. I go to the line it says I have an error, remove async await, the error goes away but the code breaks. What am I doing wrong? Is there still a way to deploy my code without having to delete the Functions folder and do it all over again?

index.js file within functions folder:

const functions = require("firebase-functions");
const express = require("express");
const cors = require("cors");
const dotenv = require("dotenv");

dotenv.config();

const stripe = require("stripe")(`${process.env.REACT_APP_STRIPE_SECRET_KEY}`);

// App config
const app = express();

// Middlewares
app.use(cors({origin: true}));
app.use(express.urlencoded({extended: true, useNewUrlParser: true}));
app.use(express.json());

// API routes
app.get("/", (req, res) => res.status(200).send("Hello World"));

//  PARSING ERROR PREVENTING DEPLOY  
app.post("/payments/create", async (req, res) => {
  const total = req.query.total;

  console.log("Payment Request Received for: , total");

  const paymentIntent = await stripe.paymentIntents.create({
    amount: total, //sub-units of currency
    currency: "USD",
  });

  res.status(201).send({
    clientSecret: paymentIntent.client_secret,
  })
});

// Listen command
exports.api = functions.https.onRequest(app);

.eslintrc.js file within functions folder:

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "google",
  ],
  rules: {
    quotes: ["error", "double"],
  },
};

package.json file within functions folder:

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "index.js",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0",
    "stripe": "^8.137.0"
  },
  "devDependencies": {
    "eslint": "^7.6.0",
    "eslint-config-google": "^0.14.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

Errors in terminal when trying to deploy:

i  deploying functions
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint /Users/Desktop/coding-repos/ecommerce/client/functions
> eslint .


/Users/Desktop/coding-repos/ecommerce/client/functions/index.js
  22:47  error  Parsing error: Unexpected token =>

✖ 1 problem (1 error, 0 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! functions@ lint: `eslint .`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the functions@ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/.npm/_logs/2021-03-05T22_26_21_954Z-debug.log

Error: functions predeploy error: Command terminated with non-zero exit code1

Answer 1

In these situations, it is a good idea to read the stack trace. The error message points to the issue or what might be the issue that you can debug.

As you can see, the error location is around 22:47 here in your index.js file. Although this is not always precise, you can assume the error will be on that line or possibly above or below it. There are exceptions to this. For example, you might not have closed brackets elsewhere in the code.

/Users/Desktop/coding-repos/ecommerce/client/functions/index.js
  22:47  error  Parsing error: Unexpected token =>

✖ 1 problem (1 error, 0 warnings)

Also, review the logs as they provide a lot of detailed information to identify what is happening. They can sometimes be hard to understand, but you usually find what you are looking for if you search backwards through the trace.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/.npm/_logs/2021-03-05T22_26_21_954Z-debug.log

A lot of developers will copy and paste code that they find on the internet. It is good when you need snippets when you are unsure how something works but can be a pain to debug because developers take old code and mix the versions up.

I am more familiar with Python, but my guess is ESlint is having problems with a version of Javascript. Look at this Stackoverflow question as I think it answers your issue. The solution appears to be using a parser.

"parser": "babel-eslint"