Cypress: Allow use of `import` and `export` in `plugins/index.js`

[dkreft]

• Operating System:
  $ uname -v
  Darwin Kernel Version 15.6.0: Mon Nov 13 21:58:35 PST 2017; root:xnu-3248.72.11~1/RELEASE_X86_64

• Node Version:
  $ node -v
  v6.11.2

• Cypress Version:
  Cypress package version: 1.4.1
  Cypress binary version: 1.4.1

• Browser Version:
  Google Chrome 64.0.3282.119

Is this a Feature or Bug?

Feature

Current behavior:

plugins/index.js requires require and module.exports =

Desired behavior:

I'd like to be able to use import and export in configuration. Webpack supports this by naming its config file webpack.config.babel.js, but that approach (plugins/index.babel.js) seems to cause the file to be ignored by Cypress.

Since my webpack config is written using import and export, I also have to require('babel-register') in order to drag in my webpack config (for use with @cypress/webpack-preprocessor).

How to reproduce:

import WebpackPreprocessor from '@cypress/webpack-preprocessor'
import WebpackConfig from '../../webpack.config.babel'

export default function(on, config) {
  on('file:preprocessor', WebpackPreprocessor({
    webpackOptions: WebpackConfig,
  }))
}

[brian-mann]

It makes sense to want to be able to utilize this - the problem is that everyone under the sun uses a different configuration for writing JS since import is not standard in node.js yet. And since plugins/index.js is the place where you tell us how to preprocess your JS files, there's no way for the plugins/index itself to already be preprocessed with your rules. It's like chicken/egg.

Because we're running this in our own node process I don't believe we'd be able to accommodate this. Anything we choose will be different than what someone else wants. To make this work today I think you'd need plugins/index.js to be a wrapper file that preloads your babel configuration and then requires another JS file so that babel has a chance to transpile it ahead of time.

[brian-mann]

@chrisbreiding @Bkucera this is a recipe we need to create especially for the upcoming cy.task. Can someone please take the initiative on this and show how you'd hook into a babel loader?

something like: require('babel-loader') in the index.js and then requiring the actual plugins file?

[chrisbreiding]

We'll soon have a recipe demonstrating this, but here's the gist:

Install the transform-es2015-modules-commonjs babel plugin:

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

Add it to your .babelrc file:

{
  "plugins": ["transform-es2015-modules-commonjs"]
}

Move your current plugins/index.js contents into plugins/main.js. Put this in plugins/index.js:

require('babel-register')

module.exports = require('./main').default