Cypress 15 node crypto

[prescottprue]

Current behavior

When updating to Cypress 15 we see an issue using Node's crypto and a custom command (which was not an issue in Cypress 14 and earlier):

crypto__WEBPACK_IMPORTED_MODULE_0___default(...).createHmac is not a function

The code which triggers this error is within support/commands.ts:

import crypto from 'crypto'

// then later
const hash = crypto.createHmac('sha256', secret)
               .update('I love cupcakes')
               .digest('hex');

When running the repro with a fork of cypress-test-tiny I see the same thing

Desired behavior

Usage of node packages such as Crypto should still work as expected. If we have to do something like putting this login in cypress task called by a command, a named import instead of default import (import { createHmac } from 'crypto') or node prefix in import (import crypto from 'node:crypto') I would expect that to be called out in the docs and/or in the version changelog (though neither of the import changes worked)

Test code to reproduce

prescottprue/cypress-test-tiny#1

Cypress Version

15.0.0

Node version

v22.14.0

Operating System

macOS 15.6

Debug Logs

Other

No response

[jennifer-shehane]

@prescottprue The removal of crypto as a browser built-in is noted in the 15 changelog: https://docs.cypress.io/app/references/changelog#15-0-0

The migration guide provides an example of how to configure a builtin that you need (so replace querystring with crypto in the example) https://docs.cypress.io/app/references/migration-guide#cypresswebpack-batteries-included-preprocessor-no-longer-shims-all-built-ins-provided-by-webpack-v4

The decision to no longer include most of these built-ins is in line with Webpack 5’s decision to remove Node builtins as explained here: https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed

In order to better align with best practices, @cypress/webpack-batteries-included-preprocessor no longer includes certain browser built-ins that were automatically provided by Webpack 4. The removed built-ins are assert, constants, crypto, domain, events, http, https, punycode, querystring, string_decoder, sys, timers, tty, url, util, vm, and zlib. However, we know that certain built-ins are popular, given that many users have files that are shared between their Cypress tests and node context. Because of this, @cypress/webpack-batteries-included-preprocessor will ship with built-in support for buffer, path, process, os, and stream. If there is a built-in that isn't supported by default and you need to add support, please refer to the Webpack resolve.fallback documentation and the @cypress/webpack-batteries-included-preprocessor README. Addresses #31039.

[AtofStryker]

@prescottprue if you need a specific reference implementation it can be seen in https://github.com/cypress-io/cypress-example-recipes/pull/921/files#diff-90d1a0880bde7008b2174a75b38b32b4c82eabdd552956bd2321f5445075571fR6 to shim in crypto to @cypress/webpack-batteries-included-preprocessor

[prescottprue]

@jennifer-shehane thanks for the fast response with all the details - totally missed that bullet calling out node built ins, apologies!

@AtofStryker thanks for the reference on shimming crypto, I will use that

[prescottprue]

@jennifer-shehane FWIW I followed the migration guide and found that it said to set typescript: true, but that caused an error about not being able to find a npm package named true - it appears that is supposed to be the name of the npm package to be used for typescript, the following worked:

on(
  'file:preprocessor',
    webpackPreprocessor({
      // if using typescript, you will need to set the typescript option to true
-     typescript: true,
+     typescript: 'typescript',
    webpackOptions: getWebpackOptions(),
  })
)

[AtofStryker]

@jennifer-shehane FWIW I followed the migration guide and found that it said to set typescript: true, but that caused an error about not being able to find a npm package named true - it appears that is supposed to be the name of the npm package to be used for typescript, the following worked:

on(
'file:preprocessor',
webpackPreprocessor({
// if using typescript, you will need to set the typescript option to true

• typescript: true,
  

• typescript: 'typescript',
  

  webpackOptions: getWebpackOptions(),
  })
  )

@prescottprue what version of the package are you using?

[prescottprue]

@AtofStryker latest as of today:

    "@cypress/webpack-batteries-included-preprocessor": "4.0.1",
    "@cypress/webpack-preprocessor": "7.0.1",

Error I see:

Error: Could not load TypeScript compiler with NPM package name `true`. Are you sure it is correctly installed?
at Watching.handle [as handler] (/node_modules/@cypress/webpack-preprocessor/dist/index.js:296:23

I'll update my repro to do this as well

[prescottprue]

Repro: cypress-io/cypress-test-tiny#98

[AtofStryker]

@prescottprue weird I thought I fixed this but I am misremembering. I'll work on getting a fix out for this. Thank you for reporting!