Cypress Task: The plugins file is missing or invalid

Question

When I added my custom task I started getting some errors and I'm not sure how to solve it. I was following the example from RWA: https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/plugins/index.ts

cypress/plugins/index.js

import axios from "axios";
import { percyHealthCheck } from "@percy/cypress/task";
import { bookingCancel } from "../../server/api/booking-controller";

export default (on, config) => {
  on("task", {
    percyHealthCheck,
    async "booking:cancel"(user, bookingId, options) {
      const response = await axios({
        baseURL: Cypress.env("apiUrl"),
        ...bookingCancel(user, bookingId, options),
      });
      return response;
    },
  });
  return config;
};

My errors:

Error: The plugins file is missing or invalid.

Your `pluginsFile` is set to `/cypress/plugins/index.js`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js`, `.ts`, or `.coffee` file.

Or you might have renamed the extension of your `pluginsFile`. If that's the case, restart the test runner.

Please fix this, or set `pluginsFile` to `false` if a plugins file is not necessary for your project.
    at Object.get (/Users/nikomel/Library/Caches/Cypress/5.5.0/Cypress.app/Contents/Resources/app/packages/server/lib/errors.js:968:15)
    at EventEmitter.<anonymous> (/Users/nikomel/Library/Caches/Cypress/5.5.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/index.js:144:21)
    at EventEmitter.emit (events.js:310:20)
    at ChildProcess.<anonymous> (/Users/nikomel/Library/Caches/Cypress/5.5.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
    at ChildProcess.emit (events.js:310:20)
    at emit (internal/child_process.js:876:12)
    at processTicksAndRejections (internal/process/task_queues.js:85:21)

/cypress/plugins/index.js:1
import { percyHealthCheck } from "@percy/cypress/task";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1051:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1166:10)
    at Module.load (internal/modules/cjs/loader.js:981:32)
    at Module._load (internal/modules/cjs/loader.js:881:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at runPlugins (/Users/nikomel/Library/Caches/Cypress/5.5.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:213:15)
    at Object.<anonymous> (/Users/nikomel/Library/Caches/Cypress/5.5.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/index.js:8:25)
    at Module._compile (internal/modules/cjs/loader.js:1145:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1166:10)
    at Module.load (internal/modules/cjs/loader.js:981:32)
    at Module._load (internal/modules/cjs/loader.js:881:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)

NOTE: I verified that pluginsFile has the correct path and I even tried explicitly provide the path to the file and it didn't resolve the problem.

Solution

Looks like you might have a stray comma in your fourth to last line

      });
      return response;
    },  <------------------ here
  });
  return config;
};