Cypress: browserslist extends not working with cypress

[marcneander]

Steps to reproduce

I'm using browserslist like so many others. I have my browserslist config published as an npm package and use it like this in my package.json:

"browserslist": [
    "extends @marcneander/browserslist-config"
],

When running yarn run cypress run with only your example tests I get this error (for all tests):

Error: [BABEL] /Users/marc/src/marcneander/marcneander.io/cypress/integration/examples/actions.spec.js: Cannot find module '@marcneander/browserslist-config' (While processing: "/Users/marc/Library/Caches/Cypress/3.1.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@babel/preset-env/lib/index.js") while parsing file: /Users/marc/src/marcneander/marcneander.io/cypress/integration/examples/actions.spec.js

Versions

Cypress: 3.1.3
Mac OS: 10.14.2
Node: 11.4.0

[jimmibond]

have you validated JSON data? you can use online tools like https://jsonformatter.org

[marcneander]

@jimmibond Not sure where you think I might have invalid JSON but the package.json file is valid JSON and the package @marcneander/browserslist-config is exporting a browserslist array https://github.com/marcneander/browserslist-config/blob/master/index.js.

https://github.com/browserslist/browserslist#shareable-configs

[chodorowicz]

I have exactly same problem with my project.

[christophehurpeau]

Same issue. There is an option in @babel/preset-env you could use: ignoreBrowserslistConfig

[chrisbreiding]

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))
}

[marcneander]

Not sure this is solved by doing the above workaround.

[jennifer-shehane]

@marcneander The above comment's workaround is intended to fix this issue. Please comment if you have tried the solution and are still experiencing this problem.

[marcneander]

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

[christophehurpeau]

Tried this plugin using only chrome as a browser and it works:

'use strict';

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

module.exports = (on, config) => {
  let customBrowserify;

  on('before:browser:launch', (browser = {}, args) => {
    const options = browserify.defaultOptions;
    const envPreset = options.browserifyOptions.transform[1][1].presets[0];
    options.browserifyOptions.transform[1][1].presets[0] = [
      envPreset,
      { ignoreBrowserslistConfig: true, targets: { [browser.name]: browser.majorVersion } },
    ];
    customBrowserify = browserify(options);
  });

  on('file:preprocessor', (file) => customBrowserify(file));
};

I think however it should be included in cypress.

[anthonytranDev]

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

[PaulMaly]

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.

[skjnldsv]

@jennifer-shehane please reconsider again. This break any good testing setup. Something as used as browserlist extends should not require some weird hack to make it work :)
Thanks for the amazing job so far!

[coderica]

@chrisbreiding @jennifer-shehane we just ran into this issue in our project. As several others have already mentioned, this is broken in Cypress and therefore this issue is not actually closed. Please reopen.

Edit: for those watching, I've gone ahead and opened https://github.com/cypress-io/cypress/issues/5252 since this one seems to have gone stale.

[leepowelldev]

Agree with others - this should be baked into Cypress without requiring workarounds

[chrisbreiding]

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())
  } 
  

[reintroducing]

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

[havenchyk]

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