cypress: browserslist extends not working with cypress

@jennifer-shehane

Please can you can you Reopen this issue, as it’s preferable that a fix is found. As many applications utilise extends @browserlist. For there web applications. Thanks!

You can modify the options for @babel/preset-env like so:

• Install the browserify preprocessor: npm install --save-dev @cypress/browserify-preprocessor
• Add this to your plugins file:

const browserify = require('@cypress/browserify-preprocessor')

module.exports = (on) => {
  const options = browserify.defaultOptions
  const envPreset = options.browserifyOptions.transform[1][1].presets[0]
  options.browserifyOptions.transform[1][1].presets[0] = [envPreset, { ignoreBrowserslistConfig: true }]

  on('file:preprocessor', browserify(options))
}

I looked into this a bit. I haven’t figured out a solution, but here are my notes for documentation’s sake:

• This failure occurs here when browserslist tries to require the extended config (e.g. @company/browserslist-config).
• It only occurs when using the browserify preprocessor that’s required by default in Cypress. Installing the browserify preprocessor in an individual project and wiring it up in the plugins file will fix the issue, even without configuring it to ignore browserslists (see new workaround below).
• This leads me to believe that the root of the issue is the user’s project being disconnected from Cypress/electron/node’s lookup paths.
• In order to bridge that disconnect, I tried using the browserify paths option to include the project path, so it would look for node modules there, but it didn’t seem to work.

Need to do more research to find a fix that can be baked into Cypress and/or the browserify preprocessor. For now, here is a simpler workaround than the one I posted above that doesn’t require ignoring browserslist:

• Install the browserify preprocessor: npm install --save-dev @cypress/browserify-preprocessor
• Add this to your plugins file:

  const browserify = require('@cypress/browserify-preprocessor')
  
  module.exports = (on) => {
    on('file:preprocessor', browserify())
  } 
  

The issue is still relevant! We can’t use browserlist configs in an appropriate way with cypress right now. Any workarounds are ridiculous in this case, it should be a part of cypress itself.

@chrisbreiding I also just ran into this issue and it seems like the last update was back on January 3rd by you. I don’t mean to +1 but this has gone stale/quiet and wanted to revive this to see if any headway has been made on this from the Cypress side? There have been many releases since that date and this issue remains open. It would be great to get an official update here as I agree with the others, this should be baked into Cypress and not require a workaround since this is the properly documented usage of external Browserslist configs.

@jennifer-shehane Not sure I agree.

I’m using browserslist in a documented way and when I do I cannot use cypress without the above workaround. A fix would be to resolve the browserslist extends in the correct way.

Still happens

any reason to use browserify-preprocessor instead of webpack-preprocessor?