Adding cypress commands throw webpack error: Can't resolve 'node:buffer'

Question

Adding cypress commands throw webpack error: Can't resolve 'node:buffer'

sebkasanzew opened this issue 2 years ago · 4 comments

Describe the bug
Adding the cypress-commands from @mocks-server to cypress results in a webpack compilation error.

To Reproduce
Add the following lines to cypress/support/e2e.ts:

import { register } from '@mocks-server/cypress-commands'

register()

Expected behavior
Cypress should run without errors when importing and registering the mocks-server commands.

Logs

Webpack Error in Cypress

Error: Webpack Compilation Error
./node_modules/node-fetch/src/index.js
Module not found: Error: Can't resolve 'node:buffer' in '/Users/user/Repos/company/service-desk/node_modules/node-fetch/src'
resolve 'node:buffer' in '/Users/user/Repos/company/service-desk/node_modules/node-fetch/src'
  Parsed request is a module
  using description file: /Users/user/Repos/company/service-desk/node_modules/node-fetch/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/user/Repos/company/service-desk/node_modules/node-fetch/src/node_modules doesn't exist or is not a directory
      /Users/user/Repos/company/service-desk/node_modules/node-fetch/node_modules doesn't exist or is not a directory
      /Users/user/Repos/company/service-desk/node_modules/node_modules doesn't exist or is not a directory
      /Users/user/Repos/company/node_modules doesn't exist or is not a directory
      /Users/user/Repos/node_modules doesn't exist or is not a directory
      /Users/user/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/user/Repos/company/service-desk/node_modules
        using description file: /Users/user/Repos/company/service-desk/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/user/Repos/company/service-desk/package.json (relative path: ./node_modules/node:buffer)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/Repos/company/service-desk/node_modules/node:buffer doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/Repos/company/service-desk/node_modules/node:buffer.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/Repos/company/service-desk/node_modules/node:buffer.json doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/Repos/company/service-desk/node_modules/node:buffer.jsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/Repos/company/service-desk/node_modules/node:buffer.mjs doesn't exist
            .coffee
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/Repos/company/service-desk/node_modules/node:buffer.coffee doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/Repos/company/service-desk/node_modules/node:buffer.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/Repos/company/service-desk/node_modules/node:buffer.tsx doesn't exist
            as directory
              /Users/user/Repos/company/service-desk/node_modules/node:buffer doesn't exist
[/Users/user/Repos/company/service-desk/node_modules/node-fetch/src/node_modules]
[/Users/user/Repos/company/service-desk/node_modules/node-fetch/node_modules]
[/Users/user/Repos/company/service-desk/node_modules/node_modules]
[/Users/user/Repos/company/node_modules]
[/Users/user/Repos/node_modules]
[/Users/user/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/user/Repos/company/service-desk/node_modules/node:buffer]
[/Users/user/Repos/company/service-desk/node_modules/node:buffer.js]
[/Users/user/Repos/company/service-desk/node_modules/node:buffer.json]
[/Users/user/Repos/company/service-desk/node_modules/node:buffer.jsx]
[/Users/user/Repos/company/service-desk/node_modules/node:buffer.mjs]
[/Users/user/Repos/company/service-desk/node_modules/node:buffer.coffee]
[/Users/user/Repos/company/service-desk/node_modules/node:buffer.ts]
[/Users/user/Repos/company/service-desk/node_modules/node:buffer.tsx]
 @ ./node_modules/node-fetch/src/index.js 13:0-35 375:20-26 396:29-35 401:5-11 402:5-11
 @ ./node_modules/cross-fetch/dist/node-ponyfill.js
 @ ./node_modules/@mocks-server/admin-api-client/dist/index.cjs.js
 @ ./node_modules/@mocks-server/cypress-commands/dist/AdminApiClient.js
 @ ./node_modules/@mocks-server/cypress-commands/dist/index.js
 @ ./cypress/support/e2e.ts
 
    at Watching.handle [as handler] (/Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at /Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:54:20
    at /Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/user/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:198:23)

Versions

OS: MacOS v13.3.1
Node.js: v18.16.0
yarn: v1.22.19
Cypress: v12.12.0
Browser: Electron v106

I can't figure out how to configure codesandbox.io to make a reproducible example there with cypress. If requested, I can try to create a dedicated repository with an example of the issue.

Answer 1 · 2023-05-18T05:26:10.000Z

Hi @sebkasanzew. Yes, please, if you could create the repository to reproduce the issue it would be very useful, thanks in advance!

Answer 2 · 2023-05-22T14:00:39.000Z

It seems like, my issue has another cause. I'm still investigating and trying to reproduce it in a more simple project. So don't close this issue the next few weeks 😅

Answer 3 · 2023-05-22T18:30:23.000Z

I figured out that in the project, where this issue is happening, there are multiple versions of node-fetch resolved in the yarn.lock file (v1.7.3, v2.6.1, v2.3.0, v2.6.7, v3.2.10). I didn't figure out how to fix the issue with yarn v1, so I just migrated the project to pnpm and everything works fine now.

Maybe there is a way to continue using yarn v1, but I wanted to migrate to pnpm anyway. So now I had one more reason.

From my point of view this issue can be closed now.

Answer 4 · 2023-05-23T18:11:40.000Z

Hi again @sebkasanzew ,
Thanks both for opening the issue and solving it. It may be useful to other users with the same problem.