[7.6.0] Webpack Compilation Error

Current behavior

After upgrading to Cypress 7.6.0 from 7.5.0, my tests can’t run anymore, failing to locate files I’m require-ing in my tests. I don’t use absolute path, but relative to the project root, so I don’t have to write require('../../../../my_dep') in my test files.

Desired behavior

I have custom babel.config.json, which helped to properly locate files.

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "current"
                }
            }
        ]
    ],
    "plugins": [
        [
            "module-resolver",
            {
                "root": [
                    "./"
                ],
                "alias": {
                    "framework": "./framework"
                }
            }
        ]
    ]
}

Test code to reproduce

• Place a helper my_utils.js file in root of your project, that will return any code.
• Have a test file placed in some sub-foldered structure, like ./tests/sub1/sub2/testfile.js, require-ing that helper file:

const utils = require('my_utils');
....
// any test code 

Try to run that test file.

Versions

Windows 10 Cypress 7.6.0

[creage]

I did some investigation on this issue, and it looks like the way our test files are processed is changed in 7.6.0. All of js files are now going through the Webpack compiler (or were they doing that already before?), and there is no way to turn it off.

So, in order to make the setup I’ve presented above work again, I had to do these steps:

1. Install @cypress/webpack-preprocessor
2. Add custom Webpack options to cypress/plugins/index.js:

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

module.exports = (on, config) => {

    const options = webpackPreprocessor.defaultOptions;

    Object.assign(options.webpackOptions, {
        resolve: {
            modules: [
                'node_modules',
                path.resolve(__dirname, '../../')
            ]
        }
    });

    on('file:preprocessor', webpackPreprocessor(options));
});

After these steps, my dependencies are back again, BUT I have to rewrite my tests to be ES6-compatible now!

Simply because

 // this code used to work before 7.6.0, since it was pure NodeJS processed
const dep = require('my_dep');

is not the same as

 // this is how code needs to be converted to work in 7.6.0, as now all of js files go through Webpack
import dep from 'my_dep';

in Webpack world.

We have ~1000 test files to refactor now, or just stick to 7.5.0.

[creage]

anyway, the easiest way to fix that was to add my “mappings” to the browser field in my package.json

"browser": {
    "framework/selectors": "./framework/selectors.js"
}