Webpack Compilation Error when upgrading to Cypress `12.17.4`

[nbouvrette]

Current behavior

After upgrade to Cypress 12.17.4 which uses Webpack 5, I started getting this error:

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

  > cypress/support/e2e.ts

The error was:

Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'process/browser' in '/Users/me/Projects/next-multilingual/node_modules/sinon/pkg'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Cannot read properties of undefined (reading 'module')
    at handle (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at finalCallback (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:441:32)
    at /Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:505:17
    at /Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.storeBuildDependencies (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Cache.js:122:37)
    at /Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:501:19
    at Hook.eval [as callAsync] (eval at create (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:498:23
    at Compiler.emitRecords (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:919:5)
    at /Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:490:11
    at /Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:882:27
    at /Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at Hook.eval [as callAsync] (eval at create (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:736:33

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:     anchor-links.cy.ts                                                               │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

Desired behavior

Based on the changeslog from 12.17.4, there should not be any impact after upgrading.

I tried to fix the issue myself by installing @cypress/webpack-preprocessor and @babel/preset-typescript but got nowhere.

I also tried to pin @cypress/webpack-batteries-included-preprocessor to v2.x.x and hooking into the file:preprocessor plugin event.

I had to:

1. run npm install @cypress/webpack-batteries-included-preprocessor@^2.0.0 --save-dev
2. Add this in my `cypress.config.ts:

import preprocessor from '@cypress/webpack-batteries-included-preprocessor'
import { defineConfig } from 'cypress'

export default defineConfig({
  video: false,
  screenshotOnRunFailure: false,
  e2e: {
    setupNodeEvents: (on) => {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call
      on('file:preprocessor', preprocessor())
    },
    baseUrl: 'http://localhost:3000',
  },
})

Unfortunately as soon as I do this I get new errors:

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

  > cypress/e2e/anchor-links.cy.ts

The error was:

Error: You are attempting to run a TypeScript file, but do not have TypeScript installed. Ensure you have 'typescript' installed to enable TypeScript support.

The file: /Users/me/Projects/next-multilingual/cypress/e2e/anchor-links.cy.ts
    at Object.handler (/Users/me/Projects/next-multilingual/node_modules/@cypress/webpack-batteries-included-preprocessor/index.js:162:29)
    at invoke (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:183:18)
    at /Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:59:14
    at tryCatcher (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.attempt.Promise.try (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/method.js:39:29)
    at Object.wrapChildPromise (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:58:23)
    at Object.wrap (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/preprocessor.js:47:8)
    at RunPlugins.execute (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:157:29)
    at EventEmitter.<anonymous> (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:56:12)
    at EventEmitter.emit (node:events:513:28)
    at EventEmitter.emit (node:domain:489:12)
    at process.<anonymous> (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:33:22)
    at process.emit (node:events:513:28)
    at process.emit (node:domain:489:12)
    at process.emit.sharedData.processEmitHook.installedValue [as emit] (/Users/me/Library/Caches/Cypress/12.17.4/Cypress.app/Contents/Resources/app/node_modules/@cspotcode/source-map-support/source-map-support.js:745:40)
    at emit (node:internal/child_process:937:14)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

My only solution is to downgrade Cypress to 12.17.3

Test code to reproduce

1. Clone https://github.com/Avansai/next-multilingual
2. Upgrade Cypress
3. run npm install
4. Run npm run test

Cypress Version

12.17.4

Node version

v18.16.0

Operating System

macOS 13.4.1

Debug Logs

No response

Other

No response

[javelinco]

We are seeing the same behavior across multiple repositories.

[W01fw00d]

We have a similar issue when running cypress component tests only on 12.17.4.

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve '.../support/component-index.html'.

For now, we only found downgrading as a solution.

[AtofStryker]

Hi @nbouvrette. Thank you for opening an issue and I am sorry the update is causing you problems. I wasn't able to get things working with npm run test, but since it is a preprocessor issue I can just run npx cypress open and run any spec in your project to reproduce.

After investigating, it looks like Webpack 5 added a resolve.fullySpecified that defaults to true. This means that ESM modules that have .mjs or .js extensions requiring imports must specify a complete resolution path. This wasn't mentioned in the migration guide from webpack 4 to 5, so it is something we missed and I apologize for that. I can confirm that this an issue with @cypress/webpack-batteries-included-preprocessor which ships with cypress under the hood, and adding the following in the default module.rules config looks to solve the issue

{
  test: /\.m?js$/,
  resolve: {
    fullySpecified: false,
  },
}

I am currently working on recreating the scenario in which this happens to add a regression test to our repo. Once that is done, I will publish a dev binary for you and others experiencing the same issue to test. Once we confirm it works, we will work on patching cypress and @cypress/webpack-batteries-included-preprocessor.

[AtofStryker]

@W01fw00d it looks like you might have some issues loading .html files. This looks like a separate issue. Are you able to create a new issue with a reproduction?

[AtofStryker]

Binaries are available if anyone would like to additionally verify the proposed solution 021dce6

[nbouvrette]

Thanks @AtofStryker - do you know when a release is planned so that we can use the fix?

[MikeMcC399]

@nbouvrette

• Have you already tested with the beta version from PR fix: resolve process/browser to process/browser.js to resolve correct… #27611?

• Install pre-release version has instructions about how to do this.

[nbouvrette]

Thanks @MikeMcC399 - I didn't know about the pre-release versions. I just tested this version and it looks good!

Any idea when the next official release will be available?