Bug [ERROR] Could not resolve "crypto"

[jamalsoueidan]

I'm working on remix 2.1.0 when using validate-form 5.1.5 it throws an error about crypto:

[ERROR] Could not resolve "crypto"

node_modules/remix-validated-form/node_modules/nanoid/index.js:1:19:
  1 │ import crypto from 'crypto'
    ╵                    ~~~~~~~~

The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

"dependencies": {
"@remix-run/css-bundle": "2.1.0",
"@remix-run/react": "2.1.0",
"@remix-validated-form/with-zod": "^2.0.7",
"date-fns": "^2.30.0",
"date-fns-tz": "^2.0.0",
"graphql": "^16.6.0",
"graphql-tag": "^2.12.6",
"isbot": "^3.6.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"remix-validated-form": "^5.1.5",
"zod": "^3.21.4"
},

├─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
└── [email protected]

[jamalsoueidan]

After some research I added:

serverNodeBuiltinsPolyfill: {
modules: {
crypto: true,
buffer: true,
},
},

to remix.config.js

This brings a new error:

ReferenceError: Buffer is not defined
at fillPool (C:\Users\Jamal\booking-storefront\node_modules\remix-validated-form\node_modules\nanoid\index.js:7:12)
at nanoid (C:\Users\Jamal\booking-storefront\node_modules\remix-validated-form\node_modules\nanoid\index.js:38:3)
at C:\Users\Jamal\booking-storefront\node_modules\remix-validated-form\src\internal\state\fieldArray.tsx:81:43

Is it possible to use another package then nanoid?

[airjp73]

Hi! Could you make a repo with a reproduction of this issue? I haven't run into it myself so it will be hard to verify a fix.

[jamalsoueidan]

I just saw your message, I went with another package to finish my work.

I wanted to run this on shopify hydrogen if you want to know.

[jamalsoueidan]

I think we need to find another package that doesn't require any node packages like crypto or Buffer etc.