[7.6.0] Webpack Compilation Error

[creage]

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

[zeptonaut]

We have a very similar setup (we use Babel's module resolver to get rid of long relative paths) and are also unable to upgrade to 7.6.0 for the same reasons.

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

[jennifer-shehane]

My guess would be that the change was introduced in this PR: #15611

This wasn't intended to introduce breaking changes, so any ways that your tests are running differently was unintended.

• Can you provide a screenshot or text of the error and where it is being displayed?
• Can you include your package.json, with required deps needed to recreate?
• Also include any plugins files, etc to reproduce.

I wasn't able to reproduce it from the information given alone.

[creage]

@jennifer-shehane Here is what my output looks like

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    7.7.0                                                                              │
  │ Browser:    Chrome 91                                                                          │
  │ Specs:      1 found (Detail Page/Case/148760.js)                                               │
  │ Searched:   tests\**\148760.js                                                                 │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  Detail Page/Case/148760.js                                                      (1 of 1)

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

  tests\Detail Page\Case\148760.js

The error was:

Error: Webpack Compilation Error
./tests/Detail Page/Case/148760.js
Module not found: Error: Can't resolve 'framework/selectors' in 'C:\e2e-cypress\tests\Detail Page\Case'
resolve 'framework/selectors' in 'C:\e2e-cypress\tests\Detail Page\Case'
  Parsed request is a module
  using description file: C:\e2e-cypress\package.json (relative path: ./tests/Detail Page/Case)
    Field 'browser' doesn't contain a valid alias configuration
    Looked for and couldn't find the file at the following paths:
[C:\e2e-cypress\tests\Detail Page\Case\node_modules]
[C:\e2e-cypress\tests\Detail Page\node_modules]
[C:\e2e-cypress\tests\node_modules]
[C:\Git\Parallel\WZC\node_modules]
[C:\Git\Parallel\node_modules]
[C:\Git\node_modules]
[C:\node_modules]
[C:\e2e-cypress\node_modules\framework\selectors]
[C:\node_modules\framework\selectors]
[C:\e2e-cypress\node_modules\framework\selectors.js]
[C:\node_modules\framework\selectors.js]
[C:\e2e-cypress\node_modules\framework\selectors.json]
[C:\node_modules\framework\selectors.json]
[C:\e2e-cypress\node_modules\framework\selectors.jsx]
[C:\node_modules\framework\selectors.jsx]
[C:\e2e-cypress\node_modules\framework\selectors.mjs]
[C:\node_modules\framework\selectors.mjs]
[C:\e2e-cypress\node_modules\framework\selectors.coffee]
[C:\node_modules\framework\selectors.coffee]
 @ ./tests/Detail Page/Case/148760.js 3:12-42
 
    at handle (C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\@cypress\webpack-preprocessor\dist\index.js:176:23)
    at finalCallback (C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:257:39)
    at C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:306:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)  
    at AsyncSeriesHook.lazyCompileHook (C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:304:22
    at Compiler.emitRecords (C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:499:39)
    at C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:298:10
    at C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)  
    at AsyncSeriesHook.lazyCompileHook (C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:482:27
    at C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\neo-async\async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)  
    at AsyncSeriesHook.lazyCompileHook (C:\Users\test_user\AppData\Local\Cypress\Cache\7.7.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\Hook.js:154:20)

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        0                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     Detail Page/Case/148760.js                                                       │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ×  Detail Page/Case/148760.js                 0ms        -        -        1        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ×  1 of 1 failed (100%)                       0ms        -        -        1        -        -

npm ERR! Test failed.  See above for more details.

My package.json deps looks like this

...
    "dependencies": {
        "@babel/core": "7.14.6",
        "@babel/eslint-parser": "7.14.7",
        "@babel/preset-env": "7.14.7",
        "babel-plugin-module-resolver": "4.1.0",
        "cypress": "7.7.0",
        "cypress-ntlm-auth": "3.2.3",
        "eslint": "7.30.0",
        "eslint-plugin-cypress": "2.11.3",
        "eslint-plugin-sonarjs": "0.9.1"
    },
    "devDependencies": {
        "@commitlint/cli": "12.1.4",
        "@commitlint/config-conventional": "12.1.4",
        "lint-staged": "11.0.0"
    }
...

And I have no plugins.

[creage]

@jennifer-shehane any progress on this issue?

I've just tried with the latest Cypress 8.2.0, and the problem is still there.

[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"
}