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

Created on 13 Apr 2020 · 4Comments · Source: cypress-io/cypress

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

Source

caoxu2000

Most helpful comment

@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.

leaveswoods on 28 Aug 2020

👍3 🎉1

All 4 comments

The pluginsFile runs within the context of Node - and also within the Node.js version bundled with Cypress. Node.js did not support import statements out-of-the-box until Node.js 13.2.0 with some limitations you can read about here. https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663

Use a require statement within plugins file.

jennifer-shehane on 14 Apr 2020

I can managed to get it run by using babel-register, then no need to use bundler to transpile your ES6 code

leaveswoods on 14 Jul 2020

@leaveswoods Can you elaborate on your statement? I am having the same issue and I am wondering how you solved it?

RaviH on 27 Aug 2020

@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', }, }, ] ], })

leaveswoods on 28 Aug 2020

👍3 🎉1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Proposal: Regular Release Cycle

jennifer-shehane · 3Comments

Nesting of Chainables and Promises doesn't work as expected

szabyg · 3Comments

Changed variable value after visit new page

zbigniewkalinowski · 3Comments

Confusing Promise / Cypress.Promise behavior depending on browser and run mode

EirikBirkeland · 3Comments

Enzyme setup, described in related example not working properly

stormherz · 3Comments