running remix in dev has crypto dependency issue

[Fawwaz-2009]

Reproduction

run in dev and just refresh the page, you should see the crypto dependency error in the logs.

https://github.com/Fawwaz-2009/remix-crypto-form-issue

System Info

npx envinfo --system --npmPackages '{vite,@remix-run/*}' --binaries --browsers
Need to install the following packages:
  envinfo@7.14.0
Ok to proceed? (y) y

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 69.16 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/Library/pnpm/node
    Yarn: 1.22.19 - ~/Library/pnpm/yarn
    npm: 9.2.0 - ~/Library/pnpm/npm
    pnpm: 9.4.0 - ~/Library/pnpm/pnpm
    Watchman: 2024.09.09.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 130.0.6723.92
    Edge: 120.0.2210.133
    Safari: 17.5
  npmPackages:
    @remix-run/dev: ^2.13.1 => 2.13.1 
    @remix-run/node: ^2.13.1 => 2.13.1 
    @remix-run/react: ^2.13.1 => 2.13.1 
    @remix-run/serve: ^2.13.1 => 2.13.1 
    vite: ^5.1.0 => 5.4.10

Used Package Manager

npm

Expected Behavior

there shouldn't be errors in the logs with fresh project, just because of adding a form and refreshing the page.

Actual Behavior

adding a form, then refreshing the page, shows errors in the logs

[moishinetzer]

bump. I'm seeing a similar issue when creating session storage in cloudflare-pages using the cloudflare package!

Satck trace:

ReferenceError: crypto is not defined
    at createKey (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/cloudflare/dist/crypto.js:34:13)
    at unsign (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/cloudflare/dist/crypto.js:27:19)
    at decodeCookieValue (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/server-runtime/dist/cookies.js:92:33)
    at Object.parse (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/server-runtime/dist/cookies.js:64:66)
    at Object.getSession (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/server-runtime/dist/sessions/cookieStorage.js:36:67)
    at Module.handleNewSession (/Users/moishi/Documents/Repos/punchpocket/web/app/utils/auth.server.ts:231:46)
    at action (/Users/moishi/Documents/Repos/punchpocket/web/app/routes/__auth+/auth.$businessUserId.tsx:82:10)
    at async Object.callRouteAction (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/server-runtime/dist/data.js:37:16)
    at async /Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/router/dist/router.cjs.js:4644:21
    at async callLoaderOrAction (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/router/dist/router.cjs.js:4709:16)
    at async Promise.all (index 1)
    at async callDataStrategyImpl (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/router/dist/router.cjs.js:4584:17)
    at async callDataStrategy (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/router/dist/router.cjs.js:4073:19)
    at async submit (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/router/dist/router.cjs.js:3932:21)
    at async queryImpl (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/router/dist/router.cjs.js:3890:22)
    at async Object.queryRoute (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/router/dist/router.cjs.js:3859:18)
    at async handleDataRequest (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/server-runtime/dist/server.js:201:20)
    at async requestHandler (/Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/server-runtime/dist/server.js:118:18)
    at async /Users/moishi/Documents/Repos/punchpocket/node_modules/@remix-run/dev/dist/vite/cloudflare-proxy-plugin.js:70:25