Bug: "TypeError: Cannot read properties of undefined (reading 'slice')" when using Node.js crypto module

[sebastianhaberey]

Summary

Hi, I am getting the error "TypeError: Cannot read properties of undefined (reading 'slice')" when using crypto in my Vite project.

Vite version is 5.3.3.

Error message

index.ts:27 TypeError: Cannot read properties of undefined (reading 'slice')
    at node_modules/browserify-sign/node_modules/readable-stream/lib/_stream_writable.js (crypto.js?v=ef6c7699:16425:85)
    at __require (chunk-4RDJM6KU.js?v=ef6c7699:18:50)
    at node_modules/browserify-sign/node_modules/readable-stream/readable-browser.js (crypto.js?v=ef6c7699:17754:25)
    at __require (chunk-4RDJM6KU.js?v=ef6c7699:18:50)
    at node_modules/browserify-sign/browser/index.js (crypto.js?v=ef6c7699:33749:18)
    at __require (chunk-4RDJM6KU.js?v=ef6c7699:18:50)
    at node_modules/crypto-browserify/index.js (crypto.js?v=ef6c7699:39990:16)
    at __require (chunk-4RDJM6KU.js?v=ef6c7699:18:50)

[jameslounds]

Setting define: { "process.browser": true } in my vite.config.ts fixed this for me.

My problem might be different though; Before, I wasn't using node-polyfills, but resolve.alias in my vite.config.ts to resolve crypto to crypto-browserify. Except I didn't actually have crypto-browserify installed. I'm working in a subdirectory of an existing node project with crypto-browserify installed, so it was using the version in ./node_modules, not ./subdir/node_modules (there was no crypto-browserify in ./subdir/node_modules . When I added vite-plugin-node-polyfills, this added crypto-browserify and its dependencies to ./subdir/package-lock.json. Except some of the dependencies of crypto-browserify were installed with newer versions. I think this is the issue (at least for me): that some dependency of crypto-browserify has started using process.browser to check if it's running in a browser, which vite does not set by default. Copying the package-lock.json from the root project into the subdirectory project, and running npm i does work. From this copied package-lock.json, running npm up browserify-sign breaks it again, but npm i browserify-sign@4.2.2 still works (I had 4.2.1 before, and npm up takes it to 4.2.3).

The problem is with browserify-sign who wanted to support older versions of node better in v4.2.3. One of the changes they made was pinning readable-stream. Unfortunately doing so broke it for a lot of people.
So the solutions are:

• force browserify-sign to use a newer version of readable-stream by editing the package-lock.json or equivalent so that the version of readable-stream used by browserify-sign is at least 3.6.2
• or, set define: { "process.browser": true }
• or, use vite-plugin-node-polyfills to polyfill process

See the discussion on the browserify-sign commit that introduces this behaviour.

[sebastianhaberey]

Thanks for your answer! I was hoping to use vite-plugin-node-polyfills to make node crypto functionality available in the browser. I tried "process.browser": true and the above error disappeared. But now there's a complaint about missing function scrypt (which I am using). I am starting to think using crypto in the browser is not as easy as I thought.

[jameslounds]

I don't think vite-plugin-node-polyfills can polyfill scrypt; although it's in node's crypto, crypto-browserify haven't implemented it. There is this repo in the browserify organisation that hasn't been updated in six years. There are also a few other javascript scrypt implementations, but I don't know enough about this topic to make any recommendations.

[sebastianhaberey]

I think I saw those repositories but like you said, they are not maintained or not well-tested which seems dangerous for security-related code. I think I'll go another way and try the crypto web api for password encryption.

[maelp]

@jameslounds @sebastianhaberey where should you set the define: { "process.browser": true } ?

[maelp]

ah! found it, it is one of the fields of vite.config.ts