Cypress doesn't recognize 'import' ES6 syntax in plugins/index.js but it should

Current behavior:

ES6 ‘import’ keyword syntax used in plugins/index.js would throw error in Cypress GUI Runner:

// plugins/index.js
import GoogleSocialLogin from 'cypress-social-logins';

The plugins file is missing or invalid.

Your pluginsFile is set to /.../test/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 or .coffee file.

Please fix this, or set pluginsFile to false if a plugins file is not necessary for your project.
/.../test/cypress/plugins/index.js:18
import GoogleSocialLogin from 'cypress-social-logins';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:896:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:986:10)
    at Module.load (internal/modules/cjs/loader.js:816:32)
    at Module._load (internal/modules/cjs/loader.js:728:14)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at Module.require (internal/modules/cjs/loader.js:853:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at module.exports (/Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:178:15)
    at Object.<anonymous> (/Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/index.js:9:25)
    at Module._compile (internal/modules/cjs/loader.js:968:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:986:10)
    at Module.load (internal/modules/cjs/loader.js:816:32)
    at Module._load (internal/modules/cjs/loader.js:728:14)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
Stack trace
[object Object]
    at Object.get (/Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/errors.js:348:11)
    at EventEmitter.<anonymous> (/Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/index.js:121:21)
    at EventEmitter.emit (events.js:210:5)
    at ChildProcess.<anonymous> (/Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:25:29)
    at ChildProcess.emit (events.js:210:5)
    at emit (internal/child_process.js:876:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)
From previous event:
    at fn (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:88741:14)
    at ipcBus (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:88760:10)
    at Object.ipc.<computed> [as openProject] (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:88801:69)
    at Object.openProject (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:91213:67)
    at Project.componentDidMount (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:90797:78)
    at ik (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75383:360)
    at ../../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:85486:437)
    at fg (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75252:325)
    at Yj (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75376:437)
    at Lj (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75355:420)
    at file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75253:115
    at ../../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:85486:437)
    at fg (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75252:325)
    at ig (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75253:61)
    at jg (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75252:496)
    at bk (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75356:156)
    at reactionScheduler (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:48924:47)
    at runReactions (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:48900:5)
    at endBatch (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:48600:9)
From previous event:
    at App.componentDidMount (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:86770:77)
    at ik (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75383:360)
    at ../../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:85486:437)
    at fg (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75252:325)
    at Yj (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75376:437)
    at Lj (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75355:420)
    at Rg (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75346:137)
    at rk (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75411:43)
    at file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75414:301
    at ck (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75356:210)
    at zk (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75414:287)
    at render (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:75418:416)
    at Object.start (file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/app.js:89373:61)
    at file:///Users//Library/Caches/Cypress/4.3.0/Cypress.app/Contents/Resources/app/packages/desktop-gui/dist/index.html:29:11

Desired behavior:

Should be able to use Babel to transcompile ES6 syntax to ES5/CommonJS or whatever works in plugins/ folder

Test code to reproduce

https://github.com/caoxu2000/cypress-test-tiny/blob/master/cypress/plugins/index.js

Versions

Cypress: 4.3.0 OS: macOS Catalina 10.15.4 Chrome 80

[leaveswoods]

@RaviH under plugins/index.js, you can use babel on the fly to transpile ES6 code by putting this on the top of the file

require('@babel/register')({ presets: [ [ '@babel/preset-env', { targets: { node: '8.17.0', }, }, ] ], })

This is minimal setup, for more you can refer to here: https://babeljs.io/docs/en/babel-register. Some Node.js backend is using webpack and babel-loader to transpile server code to make ES6 compatible, So when you want to import some modules from backend in cypress to implement some logics like reset db, then you will probably need to import mongoose Schema if you use mongoose to define your noSQL schema. With requiring @babel/resgister in entry files, you can transpile all your ES6 code on the fly without the annoying webpack compiler.

[adworacz]

After wrestling with this issue with a teammate, we finally got @leaveswoods solution working for our Typescript plugin/index.ts file when importing ES6 modules from node_modules with the following code:

import * as register from '@babel/register'

register({
  presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
  only: [/fp-ts/, /io-ts/, /monocle-ts/, /io-ts-types/],
})

import * as E from 'fp-ts/es6/Either'
import { isLeft } from 'fp-ts/es6/Either'

...rest of our code

(In theory you may be able to modify this by using @babel/register’s only configuration param, but I couldn’t get it working in the 3 seconds I worked on it). Updated above

The reason we needed to allow-list specific node modules is because @babel/register ignores the whole node_modules directory by default. In the above code, we tell it to ignore node_modules EXCEPT for modules named fp-ts, io-ts, etc etc. In the above code, we tell babel explicitly which modules (really, which paths) it should only work on.

After we did that, we were able to import our dependencies in the plugins/index.ts file and were off to the races.

EDIT: It should be noted that this is a complete hack. Cypress makes it impossible to configure the webpack/babel transpilation outside of the plugins/index.ts file, which means that we have a chicken-egg problem where we want to configure our transpilation, but the very file where we’re forced to configure said transpilation requires transpilation itself.

I see this has a feature gap in Cypress’ implementation of webpack/Babel configuration…