Webpack Compilation Error when upgrading to Cypress 13.1.0

[tonilaukka]

Current behavior

Updated from Cypress 12.6.0 to 13.1.0 and started to get this error:

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

  > cypress/support/e2e.js

The error was:

Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'process/browser.js' in '/Users/user/repo/client/src/api'

Desired behavior

There should not be any impact after upgrading.

Test code to reproduce

1. Upgrade to 13.1.0
2. Run Cypress

Cypress Version

13.1.0

Node version

18.16.1

Operating System

macOS 13.4.1

Debug Logs

No response

Other

Looks similar to this issue: https://github.com/cypress-io/cypress/issues/27599

[AtofStryker]

hi @tonilaukka. Thank you for opening an issue. are you able to provide a reproduction or see where the process package is inside your node_modules? I'm wondering if process did not get installed with cypress

does npm i process resolve the issue as in a workaround?

[tonilaukka]

are you able to provide a reproduction

Can't share our production code and could not reproduce the error on the cypress-test-tiny template

does npm i process resolve the issue as in a workaround

@AtofStryker this worked as a workaround but what's causing the issue? Removed cypress totally and reinstalled it again but it didn't solve the issue. We use pnpm if that matters.

[AtofStryker]

Can't share our production code and could not reproduce the error on the cypress-test-tiny template. @AtofStryker this worked as a workaround but what's causing the issue? Removed cypress totally and reinstalled it again but it didn't solve the issue. We use pnpm if that matters.

@tonilaukka I can't say for certain since we don't have a reproduction, but my best guess is there is an issue with your dependency tree resolution (the way packages are installed in node_modules) in which the process package can't be discovered. We install process with cypress to make sure it is discoverable, so I am not sure why it would be missing here.

[craighawkes]

We ave started to get the same error when running cyress via docker. We use a custom docker file & have resolved it by adding in the process, but can that be added into the cypress one?

Heres our new Dockerfile - I've added the process to the end to get things running again

FROM cypress/included:13.2.0
WORKDIR /e2e
COPY cypress.config.ts cypress.config.ts
COPY cypress cypress
RUN npm install cypress-plugin-tab cypress-failed-log date-fns typescript process

[AtofStryker]

@craighawkes it should be in the cypress/included:13.2.0 image since we install process with cypress in the cli. Thats why I find the issue perplexing. Are you able to share the node_modules tree or lock file in your docker container before installing process? It might be helpful in seeing why it might be absent here.

[isomorpheric]

Same thing is happening on my end - I will try to make a minimal reproduction tonight if I have the chance - however, for now just sticking to v12 works.

hi @tonilaukka. Thank you for opening an issue. are you able to provide a reproduction or see where the process package is inside your node_modules? I'm wondering if process did not get installed with cypress

does npm i process resolve the issue as in a workaround?

Can confirm that installing pnpm add process works as a workaround. I'm using a turbo monorepo so I installed it in root: pnpm add -w -D process.

[bemanuel-trove]

Saw this when upgrading from v12.12.0 -> v13.3.0:

Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '<user directory path>/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/process/browser.js'

Webpack Compilation Error Module not found: Error: Can't resolve 'process/browser.js' in '<another sensitive path>/dist/lib'

Installing the process package manually also resolved the issue.

[ZodsPlan]

Same issue here when upgrading from "12.17.2" to "v13.3.0"... but I FIXED it just now. The error:

Webpack Compilation Error Module not found: Error: Can't resolve 'process/browser.js' in '<another sensitive path>/...

Note: In my tsconfig.json, I am using typescript project references feature. The <another sensitive path> above was from the referenced project, which did not have "process" installed. I installed it in the referenced typescript project, and then it worked.

[sergiomap]

We're encountering the same problem accessing code in a separate project directory that doesn't have Cypress. This worked fine in v12.17.1.

[FrancisBourgault]

Same issue here unfortunately. Installing "process" in all my referenced project as well as custom package installed through npm didn't fix it.

Try with all versions of Cypress from 13.0.0 to 13.3.3.

(I will try to isolate the problem further)

[AtofStryker]

@sergiomap @FrancisBourgault I would love to help if either of you are able to share a reproduction. My guess is there is something wonky with the dependency tree.

[nazad23]

I had to install process as a dev-dependency in the root package.json to get it working

[esrakartalOpt]

I had the same issue after switching from version 12 to 13. For me, it was resolved by changing the package to the older version.

I had the issue on date-fns package. Version 3 of date-fns gave webpack error on Cypress version 13. When I changed that to version 2.3, the problem was resolved.

[FrancisBourgault]

Same issue here unfortunately. Installing "process" in all my referenced project as well as custom package installed through npm didn't fix it.

Try with all versions of Cypress from 13.0.0 to 13.3.3.

(I will try to isolate the problem further)

Turns out I needed to install "process" in the dev dependencies of the package json that's at the root of my test projects (some dependencies are shared between Cypress and another tech we are using for a different kind of testing).

So, installing "process" in a folder above the cypress project folder worked, but not installing "process" inside the cypress project folder as well as any project used by cypress.

[gdrbyKo1]

It's a hack, but I've had some success with:

ln -s /usr/local/lib/node_modules/cypress/node_modules/process /usr/local/lib/node_modules/process

[szymonnowak-st]

I'm having the same issue after upgrading Yarn from 1.x to 4.x with "pnpm" install mode. We have a monorepo, but cypress is in the root package.json file. I'm getting the following error for every spec file:

Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'process/browser.js' in '/mnt/jenkins/app/node_modules/.store/@testing-library-dom-npm-10.1.0-720175996f/package/dist/@testing-library'

The error is confusing as @testing-library/dom doesn't seem to require process/browser.js anywhere and doesn't depend on process library.

yarn why process
├─ @storybook/builder-manager@npm:8.1.7
│  └─ process@npm:0.11.10 (via npm:^0.11.10)
│
├─ @storybook/builder-webpack5@npm:8.1.7
│  └─ process@npm:0.11.10 (via npm:^0.11.10)
│
├─ @storybook/builder-webpack5@npm:8.1.7 [70c44]
│  └─ process@npm:0.11.10 (via npm:^0.11.10)
│
└─ cypress@npm:13.11.0
   └─ process@npm:0.11.10 (via npm:^0.11.10)

The package is installed, but still can't be found by Cypress webpack :/

ls -l node_modules/.store/cypress-npm-13.11.0-f9b5feaae7/node_modules/process
node_modules/.store/cypress-npm-13.11.0-f9b5feaae7/node_modules/process -> ../../process-npm-0.11.10-aeb3b641ae/package

[AtofStryker]

I'm having the same issue after upgrading Yarn from 1.x to 4.x with "pnpm" install mode. We have a monorepo, but cypress is in the root package.json file. I'm getting the following error for every spec file:

Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'process/browser.js' in '/mnt/jenkins/app/node_modules/.store/@testing-library-dom-npm-10.1.0-720175996f/package/dist/@testing-library'

The error is confusing as @testing-library/dom doesn't seem to require process/browser.js anywhere and doesn't depend on process library.

yarn why process
├─ @storybook/builder-manager@npm:8.1.7
│  └─ process@npm:0.11.10 (via npm:^0.11.10)
│
├─ @storybook/builder-webpack5@npm:8.1.7
│  └─ process@npm:0.11.10 (via npm:^0.11.10)
│
├─ @storybook/builder-webpack5@npm:8.1.7 [70c44]
│  └─ process@npm:0.11.10 (via npm:^0.11.10)
│
└─ cypress@npm:13.11.0
   └─ process@npm:0.11.10 (via npm:^0.11.10)

The package is installed, but still can't be found by Cypress webpack :/

ls -l node_modules/.store/cypress-npm-13.11.0-f9b5feaae7/node_modules/process
node_modules/.store/cypress-npm-13.11.0-f9b5feaae7/node_modules/process -> ../../process-npm-0.11.10-aeb3b641ae/package

Hi @szymonnowak-st. We have actually had a bug in Cypress' webpack preprocessor with yarn 4 where dependencies are not resolved correctly. The good news is we fixed it in Cypress 13.13.2. If you are unable to upgrade, the fix has also been ported to the the preprocessor cypress uses to compile your files which can be used as a stand alone package, which is called @cypress/webpack-batteries-included-preprocessor

[szymonnowak-st]

@AtofStryker Thanks! It fixed the issue for us. The release notes mention Yarn PnP, and we're using Yarn PNPM, so I though it won't help.

[AtofStryker]

@AtofStryker Thanks! It fixed the issue for us. The release notes mention Yarn PnP, and we're using Yarn PNPM, so I though it won't help.

@szymonnowak-st my guess is that including the fixes from enhanced-resolve inside the cypress binary likely fixed a lot of other dependency discovery issues, which is a great thing! We might want to update the change entry to be a bit more generic on our end now that we know the impact is positive across other package managers.