chore: expose globalThis.crypto when not available

[balazsorban44]

What?

Exposing globalThis.crypto, based on Node.js' WebCrypto API

Why?

Similar to fetch, crypto is a popular API that is currently not available on globalThis in all active Node.js versions yet.

This can help library authors to create runtime-agnostic packages.

How?

Node.js already has the WebCrypto API that can be imported, we just expose it on globalThis in Node.js versions where this is not available.

Closes NEXT-1063

Slack thread

[balazsorban44]

Set explicitly so the test will work indefinitely in the future. Note: "edge" already exposes globalThis.crypto for us.

[balazsorban44]

See: https://github.com/vercel/next.js/pull/48941/files#r1180097586

[ijjk]

Failing test suites

Commit: f70efc0

pnpm testheadless test/e2e/app-dir/crypto-globally-available/crypto-globally-available.test.ts

• Web Crypto API is available globally > should be available in Server Components
• Web Crypto API is available globally > should be available in Route Handlers

Expand output

● Web Crypto API is available globally › should be available in Server Components

expect(received).toBe(expected) // Object.is equality

Expected: "crypto is available"
Received: "crypto is not available"

  10 |     it('should be available in Server Components', async () => {
  11 |       const browser = await next.browser('/')
> 12 |       expect(await browser.elementByCss('p').text()).toBe('crypto is available')
     |                                                      ^
  13 |     })
  14 |
  15 |     // In case you need to test the response object

  at Object.<anonymous> (e2e/app-dir/crypto-globally-available/crypto-globally-available.test.ts:12:54)

● Web Crypto API is available globally › should be available in Route Handlers

expect(received).toContain(expected) // indexOf

Expected substring: "crypto is available"
Received string:    "crypto is not available"

  17 |       const res = await next.fetch('/handler')
  18 |       const html = await res.text()
> 19 |       expect(html).toContain('crypto is available')
     |                    ^
  20 |     })
  21 |   }
  22 | )

  at Object.<anonymous> (e2e/app-dir/crypto-globally-available/crypto-globally-available.test.ts:19:20)

Read more about building and testing Next.js in contributing.md.

[balazsorban44]

I realized that webcrypto was actually added back in 15.0.0 https://nodejs.org/dist/latest-v18.x/docs/api/crypto.html#cryptowebcrypto

But we still want to bump this version since undici (what we use in App Router) requires 16.8.0+.

Let me know if this should be a different PR.

[timneutkens]

Looks good to me, thanks Balazs 💯

[t3dotgg]

Wait this unbreaks a ton of stuff for me thank you so much