[v3.3.0] "Module not found: Error: Can't resolve 'fs'" with next.js #201

leosuncin · 2020-04-19T17:24:26Z

Logs and screenshots

log output

> $ DEBUG=code-coverage npm run start:e2e ⬡ 13.12.0 [±dependabot/npm_and_yarn/cypress/code-coverage-3.3.0 ●]

> mui-next-ts@1.0.0 start:e2e /home/user/projects/mui-next-ts
> start-test dev 3000 test:e2e

starting server using command "npm run dev"
and when url "[ 'http://localhost:3000' ]" is responding with HTTP status code 200
running tests using command "npm run test:e2e"

> mui-next-ts@1.0.0 dev /home/user/projects/mui-next-ts
> next dev

[ wait ] starting the development server ...
[ info ] waiting on http://localhost:3000 ...
> Using external babel configuration
> Location: "/home/user/projects/mui-next-ts/babel.config.js"
[ info ] bundled successfully, waiting for typecheck results...
[ event ] build page: /
[ wait ] compiling ...
[ event ] build page: /
[ info ] bundled successfully, waiting for typecheck results...
[ event ] build page: /
[ wait ] compiling ...
[ event ] build page: /
[ info ] bundled successfully, waiting for typecheck results...

> mui-next-ts@1.0.0 test:e2e /home/user/projects/mui-next-ts
> cypress run

[ ready ] compiled successfully - ready on http://localhost:3000

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

(Run Starting)

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Cypress: 4.3.0 │
│ Browser: Electron 80 (headless) │
│ Specs: 3 found (login.spec.ts, main.spec.ts, register.spec.ts) │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

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

Running: login.spec.ts (1 of 3)

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

cypress/support/index.js

The error was:

Error: Webpack Compilation Error
./node_modules/@cypress/code-coverage/utils.js
Module not found: Error: Can't resolve 'fs' in '/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage'
resolve 'fs' in '/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage'
Parsed request is a module
using description file: /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/home/user/projects/mui-next-ts/node_modules/@cypress/node_modules doesn't exist or is not a directory
/home/user/projects/mui-next-ts/node_modules/node_modules doesn't exist or is not a directory
/home/user/projects/node_modules doesn't exist or is not a directory
/home/user/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules
using description file: /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
looking for modules in /home/user/projects/mui-next-ts/node_modules
using description file: /home/user/projects/mui-next-ts/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
using description file: /home/user/projects/mui-next-ts/package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/fs doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/fs.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.tsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/fs.tsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.js doesn't exist
/home/user/projects/mui-next-ts/node_modules/fs.js doesn't exist
as directory
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs doesn't exist
as directory
/home/user/projects/mui-next-ts/node_modules/fs doesn't exist
[/home/user/projects/mui-next-ts/node_modules/@cypress/node_modules]
[/home/user/projects/mui-next-ts/node_modules/node_modules]
[/home/user/projects/node_modules]
[/home/user/node_modules]
[/home/node_modules]
[/node_modules]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs]
[/home/user/projects/mui-next-ts/node_modules/fs]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.ts]
[/home/user/projects/mui-next-ts/node_modules/fs.ts]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.tsx]
[/home/user/projects/mui-next-ts/node_modules/fs.tsx]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.js]
[/home/user/projects/mui-next-ts/node_modules/fs.js]
@ ./node_modules/@cypress/code-coverage/utils.js 3:52-65
@ ./node_modules/@cypress/code-coverage/support.js
@ ./cypress/support/index.js
@ multi ./cypress/support/index.js

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: true │
│ Duration: 0 seconds │
│ Spec Ran: login.spec.ts │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

(Video)

Started processing: Compressing to 32 CRF
Finished processing: /home/user/projects/mui-next-ts/cypress/ (0 seconds)
videos/.spec.ts.mp4

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

Running: main.spec.ts (2 of 3)

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

cypress/support/index.js

The error was:

Error: Webpack Compilation Error
./node_modules/@cypress/code-coverage/utils.js
Module not found: Error: Can't resolve 'fs' in '/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage'
resolve 'fs' in '/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage'
Parsed request is a module
using description file: /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/home/user/projects/mui-next-ts/node_modules/@cypress/node_modules doesn't exist or is not a directory
/home/user/projects/mui-next-ts/node_modules/node_modules doesn't exist or is not a directory
/home/user/projects/node_modules doesn't exist or is not a directory
/home/user/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules
using description file: /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
looking for modules in /home/user/projects/mui-next-ts/node_modules
using description file: /home/user/projects/mui-next-ts/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
using description file: /home/user/projects/mui-next-ts/package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/fs doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/fs.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.tsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/fs.tsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.js doesn't exist
/home/user/projects/mui-next-ts/node_modules/fs.js doesn't exist
as directory
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs doesn't exist
as directory
/home/user/projects/mui-next-ts/node_modules/fs doesn't exist
[/home/user/projects/mui-next-ts/node_modules/@cypress/node_modules]
[/home/user/projects/mui-next-ts/node_modules/node_modules]
[/home/user/projects/node_modules]
[/home/user/node_modules]
[/home/node_modules]
[/node_modules]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs]
[/home/user/projects/mui-next-ts/node_modules/fs]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.ts]
[/home/user/projects/mui-next-ts/node_modules/fs.ts]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.tsx]
[/home/user/projects/mui-next-ts/node_modules/fs.tsx]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.js]
[/home/user/projects/mui-next-ts/node_modules/fs.js]
@ ./node_modules/@cypress/code-coverage/utils.js 3:52-65
@ ./node_modules/@cypress/code-coverage/support.js
@ ./cypress/support/index.js
@ multi ./cypress/support/index.js

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: true │
│ Duration: 0 seconds │
│ Spec Ran: main.spec.ts │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

(Video)

Started processing: Compressing to 32 CRF
Finished processing: /home/user/projects/mui-next-ts/cypress/ (0 seconds)
videos/main.spec.ts.mp4

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

Running: register.spec.ts (3 of 3)

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

cypress/support/index.js

The error was:

Error: Webpack Compilation Error
./node_modules/@cypress/code-coverage/utils.js
Module not found: Error: Can't resolve 'fs' in '/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage'
resolve 'fs' in '/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage'
Parsed request is a module
using description file: /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/home/user/projects/mui-next-ts/node_modules/@cypress/node_modules doesn't exist or is not a directory
/home/user/projects/mui-next-ts/node_modules/node_modules doesn't exist or is not a directory
/home/user/projects/node_modules doesn't exist or is not a directory
/home/user/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules
using description file: /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
looking for modules in /home/user/projects/mui-next-ts/node_modules
using description file: /home/user/projects/mui-next-ts/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: /home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
using description file: /home/user/projects/mui-next-ts/package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/fs doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/fs.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.tsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/fs.tsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.js doesn't exist
/home/user/projects/mui-next-ts/node_modules/fs.js doesn't exist
as directory
/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs doesn't exist
as directory
/home/user/projects/mui-next-ts/node_modules/fs doesn't exist
[/home/user/projects/mui-next-ts/node_modules/@cypress/node_modules]
[/home/user/projects/mui-next-ts/node_modules/node_modules]
[/home/user/projects/node_modules]
[/home/user/node_modules]
[/home/node_modules]
[/node_modules]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs]
[/home/user/projects/mui-next-ts/node_modules/fs]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.ts]
[/home/user/projects/mui-next-ts/node_modules/fs.ts]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.tsx]
[/home/user/projects/mui-next-ts/node_modules/fs.tsx]
[/home/user/projects/mui-next-ts/node_modules/@cypress/code-coverage/node_modules/fs.js]
[/home/user/projects/mui-next-ts/node_modules/fs.js]
@ ./node_modules/@cypress/code-coverage/utils.js 3:52-65
@ ./node_modules/@cypress/code-coverage/support.js
@ ./cypress/support/index.js
@ multi ./cypress/support/index.js

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: true │
│ Duration: 0 seconds │
│ Spec Ran: register.spec.ts │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

(Video)

Started processing: Compressing to 32 CRF
Finished processing: /home/user/projects/mui-next-ts/cypress/ (0 seconds)
videos/register.spec.ts.mp4

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

(Run Finished)

   Spec                                              Tests  Passing  Failing  Pending  Skipped

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ ✖ login.spec.ts 0ms - - 1 - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✖ main.spec.ts 0ms - - 1 - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✖ register.spec.ts 0ms - - 1 - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✖ 3 of 3 failed (100%) 0ms - - 3 - -

npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! mui-next-ts@1.0.0 test:e2e: cypress run
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the mui-next-ts@1.0.0 test:e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/jsuncin/.npm/_logs/2020-04-19T17_01_15_539Z-debug.log
Error: Command failed with exit code 3: npm run test:e2e
at makeError (/home/user/projects/mui-next-ts/node_modules/execa/lib/error.js:56:11)
at handlePromise (/home/user/projects/mui-next-ts/node_modules/execa/index.js:114:26)
at processTicksAndRejections (internal/process/task_queues.js:97:5) {
command: 'npm run test:e2e',
exitCode: 3,
signal: undefined,
signalDescription: undefined,
stdout: undefined,
stderr: undefined,
failed: true,
timedOut: false,
isCanceled: false,
killed: false
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mui-next-ts@1.0.0 start:e2e: start-test dev 3000 test:e2e
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mui-next-ts@1.0.0 start:e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/user/.npm/_logs/2020-04-19T17_01_15_591Z-debug.log

CI output

Versions

What is this plugin's version?
3.3.0
What is Cypress version?
4.3.0
What is your operating system?
Manjaro Linux
What is the shell?
ZSH
What is the Node version?
13.12.0
What is the NPM version?
6.14.4
Is there .nyc_output folder? Is there .nyc_output/out.json file. Is it empty? Can you paste at least part of it so we can see the keys and file paths?
Is empty
Do you have any custom NYC settings in package.json (nyc object) or in other NYC config files

...
  "nyc": {
    "extends": "@istanbuljs/nyc-config-typescript",
    "all": true,
    "report-dir": "coverage/e2e",
    "exclude": [
      "pages/api/__coverage__.ts"
    ]
  }
...

Do you run Cypress tests in a Docker container?
No, except from CI

Describe the bug
Next.js strip out fs module from dependency tree to avoid to be included in client bundle. In the last version (dfaed9b) this plugin require fs to work, so is incompatible with next.js.

Link to the repo
https://github.com/leosuncin/mui-next-ts/tree/dependabot/npm_and_yarn/cypress/code-coverage-3.3.0

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

suits-at · 2020-04-20T07:48:17Z

I can confirm the issue. Downgrading to "3.2.1" temporarily fixes the problem.

bahmutov · 2020-04-20T12:45:33Z

Hmm, I see the problem - I moved some task utilities into utils.js which gets loaded from the browser and fails now. Will fix soon.

bahmutov · 2020-04-20T13:44:11Z

🎉 This issue has been resolved in version 3.3.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

leosuncin changed the title ~~v3.3.0 is compatible with next.js~~ v3.3.0 is incompatible with next.js Apr 19, 2020

leosuncin changed the title ~~v3.3.0 is incompatible with next.js~~ [v3.3.0] "Module not found: Error: Can't resolve 'fs'" with next.js Apr 19, 2020

jennifer-shehane assigned bahmutov Apr 20, 2020

bahmutov mentioned this issue Apr 20, 2020

fix: split utils into support and task utils #202

Merged

bahmutov closed this as completed in #202 Apr 20, 2020

bahmutov mentioned this issue Apr 20, 2020

Need webpack example that we test right here #203

Closed

bahmutov added the released label Apr 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v3.3.0] "Module not found: Error: Can't resolve 'fs'" with next.js #201

[v3.3.0] "Module not found: Error: Can't resolve 'fs'" with next.js #201

leosuncin commented Apr 19, 2020

suits-at commented Apr 20, 2020

bahmutov commented Apr 20, 2020

bahmutov commented Apr 20, 2020

[v3.3.0] "Module not found: Error: Can't resolve 'fs'" with next.js #201

[v3.3.0] "Module not found: Error: Can't resolve 'fs'" with next.js #201

Comments

leosuncin commented Apr 19, 2020

suits-at commented Apr 20, 2020

bahmutov commented Apr 20, 2020

bahmutov commented Apr 20, 2020