Webpack Compilation Error when upgrading to Cypress `12.17.4` #27599

nbouvrette · 2023-08-19T02:00:23Z

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:

run npm install @cypress/webpack-batteries-included-preprocessor@^2.0.0 --save-dev
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

Clone https://github.com/Avansai/next-multilingual
Upgrade Cypress
run npm install
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

The text was updated successfully, but these errors were encountered:

javelinco · 2023-08-20T19:03:04Z

We are seeing the same behavior across multiple repositories.

W01fw00d · 2023-08-21T13:26:06Z

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 · 2023-08-21T15:19:53Z

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 · 2023-08-21T15:21:06Z

@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 · 2023-08-21T19:00:13Z

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

nbouvrette · 2023-08-26T15:18:16Z

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

MikeMcC399 · 2023-08-28T08:22:33Z

@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 · 2023-08-28T14:07:36Z

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?

MikeMcC399 · 2023-08-28T14:17:24Z

@nbouvrette

I just tested this version and it looks good!

It's great to hear your confirmation! 🚀

Any idea when the next official release will be available?

I don't have insider information. My best information is the date currently shown in https://github.com/cypress-io/cypress/blob/develop/cli/CHANGELOG.md

Released 08/29/2023 (PENDING)

however there are no guarantees and planning often changes at short notice.

AtofStryker · 2023-08-28T14:31:23Z

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

This should be released with Cypress v13, which is planned to release tomorrow

jennifer-shehane · 2023-08-29T17:21:42Z

Released in Cypress 13.0.0.

baptou12 mentioned this issue Aug 21, 2023

build(deps-dev): bump cypress from 12.17.2 to 12.17.4 betagouv/mes-aides-analytics#111

Closed

AtofStryker self-assigned this Aug 21, 2023

AtofStryker mentioned this issue Aug 21, 2023

Upgrading to v12.17.4 broken node 17 support #27589

Closed

AtofStryker added type: bug Reproducible Can be reproduced labels Aug 21, 2023

AtofStryker mentioned this issue Aug 21, 2023

fix: resolve process/browser to process/browser.js to resolve correct… #27611

Merged

3 tasks

mjhenkes closed this as completed in #27611 Aug 22, 2023

cypress-io locked as resolved and limited conversation to collaborators Aug 29, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack Compilation Error when upgrading to Cypress `12.17.4` #27599

Webpack Compilation Error when upgrading to Cypress `12.17.4` #27599

nbouvrette commented Aug 19, 2023 •

edited

Loading

javelinco commented Aug 20, 2023

W01fw00d commented Aug 21, 2023

AtofStryker commented Aug 21, 2023

AtofStryker commented Aug 21, 2023

AtofStryker commented Aug 21, 2023

nbouvrette commented Aug 26, 2023

MikeMcC399 commented Aug 28, 2023

nbouvrette commented Aug 28, 2023

MikeMcC399 commented Aug 28, 2023

AtofStryker commented Aug 28, 2023

jennifer-shehane commented Aug 29, 2023

Webpack Compilation Error when upgrading to Cypress 12.17.4 #27599

Webpack Compilation Error when upgrading to Cypress 12.17.4 #27599

Comments

nbouvrette commented Aug 19, 2023 • edited Loading

Current behavior

Desired behavior

Test code to reproduce

Cypress Version

Node version

Operating System

Debug Logs

Other

javelinco commented Aug 20, 2023

W01fw00d commented Aug 21, 2023

AtofStryker commented Aug 21, 2023

AtofStryker commented Aug 21, 2023

AtofStryker commented Aug 21, 2023

nbouvrette commented Aug 26, 2023

MikeMcC399 commented Aug 28, 2023

nbouvrette commented Aug 28, 2023

MikeMcC399 commented Aug 28, 2023

AtofStryker commented Aug 28, 2023

jennifer-shehane commented Aug 29, 2023

Webpack Compilation Error when upgrading to Cypress `12.17.4` #27599

Webpack Compilation Error when upgrading to Cypress `12.17.4` #27599

nbouvrette commented Aug 19, 2023 •

edited

Loading