babel.config.js file not working in v8

[javierbrea]

Current behavior

babel.config.js file seems to be ignored in Cypress v8. I was using it in previous Cypress versions to configure babel aliases to be used in Cypress integration and support files using babel-plugin-module-resolver.

Now, with a babel.config.js file like this:

module.exports = {
  plugins: [
    [
      "module-resolver",
      {
        root: ["."],
        alias: {
          "cypress-localstorage-commands": `../../`,
        },
      },
    ],
  ],
};

I receive this error:

Oops...we found an error preparing this test file:

  cypress/support/index.js

The error was:

Error: Webpack Compilation Error
./cypress/support/commands.js
Module not found: Error: Can't resolve 'cypress-localstorage-commands' in '/Users/foo/cypress-localstorage-commands/test-e2e/react-app/cypress/support'
resolve 'cypress-localstorage-commands' in '/Users/foo/cypress-localstorage-commands/test-e2e/react-app/cypress/support'
  Parsed request is a module
  using description file: /Users/foo/cypress-localstorage-commands/test-e2e/react-app/package.json (relative path: ./cypress/support)

Desired behavior

It is desirable that Cypress continues supporting custom babel configuration files when processing integration, support or plugins files, or at least any valid alternative for customizing babel config.

Test code to reproduce

You can reproduce the error in the cypress-localstorage-commands repository, branch chore-330-cypress-v8.
Running npm run test:e2e produces the described error, while running it in the master branch (which is using Cypress v7 in E2E tests) works properly.

Cypress Version

8.0.0

Other

No response

[jennifer-shehane]

This change was likely introduced in 7.6.0, maybe with this change: #16980 Can you confirm this is failing in 7.6.0?

[javierbrea]

Hi @jennifer-shehane,

Yes, you're right, it also fails with version 7.6.0, and was working with 7.5.0.

Now that I see that it was an intentional change, exists any other alternative to support custom babel configuration to preprocess spec and support files, or do you have planned to support it again?

I think that using aliases is an important feature when the support folder grows in complexity, for example when implementing a "page-object-model", or a "page actions" design pattern.

Thank you very much, please let me know if I can help any way

[jennifer-shehane]

If you need to load the custom config, you can use our preprocessor API to pass through those options. https://on.cypress.io/preprocessors-api#Examples

[javierbrea]

Thank you @jennifer-shehane,

Using preprocessor API worked and allowed me to use again the babel.config.js file:

// plugins/index.js
const webpackPreprocessor = require("@cypress/webpack-preprocessor");
const defaults = webpackPreprocessor.defaultOptions;

module.exports = (on) => {
  delete defaults.webpackOptions.module.rules[0].use[0].options.presets;
  on("file:preprocessor", webpackPreprocessor(defaults));
};

[ghost]

This is amazing. Thank you for sharing, @javierbrea!