feat: custom webpack config for react/plugins/babel

[penx]

• Closes @cypress/react/plugins/babel doesn't work in a monorepo #16596

User facing changelog

Allow wepback config in @cypress/react/plugins/babel to be configurable to support running within a monorepo.

Additional details

If running Cypress within a monorepo, babel will not search upwards beyond the working directory to find the babel config, and will fail to transpile most code including JSX.

https://babeljs.io/docs/en/config-files#monorepos

How has the user experience changed?

Usage:

// plugins/index.js
module.exports = (on, config) => {
  if (config.testingType === 'component') {
    require('@cypress/react/plugins/babel')(on, config, {
      setWebpackConfig: (webpackConfig) => {
        webpackConfig.resolve.alias = {
          '@my-monorepo/my-package': '../../my-package/src',
        }
        webpackConfig.module.rules.find(({ loader }) => loader === 'babel-loader').options = {
          rootMode: 'upward',
        }
        return webpackConfig
      },
    });
  }
  return config
};

PR Tasks

• Have tests been added/updated?
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?
• Have new configuration options been added to the cypress.schema.json?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[penx]

cc @bahmutov

[lmiller1990]

Nicely done, just need to revert the change in cypress.schema.json and we can merge this up. It'll be available immediately after merging via semantic release.

[lmiller1990]

This is not needed, this file is for the options in cypress.json. Docs here.

[penx]

@lmiller1990 ah ok, I had assumed that it could also be passed in via cypress.json (as the config would get forwarded) but it appears it is filtered out.

Is this still the right way to pass non global config? Or should it be in a separate param?

[penx]

I've reverted the change and pushed

[penx]

@lmiller1990 I have also realised it may be handy to configure other parameters, such as adding alias to resolve (line 6)

Will have a think if there's a better way of doing this that allows a little more flexibility.

[penx]

Ok so react/plugins/load-webpack/index accepts a 3rd argument for its config.

I have mirrored this by adding a third argument to react/plugins/babel/index.js that allows an optional function to be specified to make edits to the webpack config.