[🐞] ../../npm/node_modules/@panva/hkdf/dist/node/esm/runtime/fallback.js (1:9): "createHmac" is not exported by "__vite-browser-external", imported by "../../npm/node_modules/@panva/hkdf/dist/node/esm/runtime/fallback.js".

[Nefcanto]

Which component is affected?

Qwik Runtime

Describe the bug

I upgraded to Vite 6 and @auth/qwik and this happened:

../../npm/node_modules/@panva/hkdf/dist/node/esm/runtime/fallback.js (1:9): "createHmac" is not exported by "__vite-browser-external", imported by "../../npm/node_modules/@panva/hkdf/dist/node/esm/runtime/fallback.js".

This is the complete error:

x Build failed in 4.57s
error during build:
../../npm/node_modules/@panva/hkdf/dist/node/esm/runtime/fallback.js (1:9): "createHmac" is not exported by "__vite-browser-external", imported by "../../npm/node_modules/@panva/hkdf/dist/node/esm/runtime/fallback.js".
file: /npm/node_modules/@panva/hkdf/dist/node/esm/runtime/fallback.js:1:9

1: import { createHmac } from 'crypto';
            ^
2: export default (digest, ikm, salt, info, keylen) => {
3:     const hashlen = parseInt(digest.substr(3), 10) >> 3 || 20;

    at getRollupError (file:///npm/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
    at error (file:///npm/node_modules/rollup/dist/es/shared/parseAst.js:392:42)
    at Module.error (file:///npm/node_modules/rollup/dist/es/shared/node-entry.js:15593:16)
    at Module.traceVariable (file:///npm/node_modules/rollup/dist/es/shared/node-entry.js:16042:29)
    at ModuleScope.findVariable (file:///npm/node_modules/rollup/dist/es/shared/node-entry.js:13825:39)
    at ReturnValueScope.findVariable (file:///npm/node_modules/rollup/dist/es/shared/node-entry.js:5288:38)
    at FunctionBodyScope.findVariable (file:///npm/node_modules/rollup/dist/es/shared/node-entry.js:5288:38)
    at Identifier.bind (file:///npm/node_modules/rollup/dist/es/shared/node-entry.js:5071:40)
    at CallExpression.bind (file:///npm/node_modules/rollup/dist/es/shared/node-entry.js:2658:23)
    at CallExpression.bind (file:///npm/node_modules/rollup/dist/es/shared/node-entry.js:11289:15)

❌ Error: Client build failed: Error: Command failed with exit code 1: npm run build.client

Reproduction

No MRE

Steps to reproduce

No response

System Info

System:
    OS: Linux 6.8 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Memory: 8.63 GB / 15.50 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 22.11.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.9.1 - /usr/local/bin/npm
  Browsers:
    Chromium: 131.0.6778.85
  npmPackages:
    @builder.io/partytown: ^0.10.2 => 0.10.2 
    @builder.io/qwik: ^1.11.0 => 1.11.0 
    @builder.io/qwik-auth: ^0.2.2 => 0.2.2 
    @builder.io/qwik-city: ^1.11.0 => 1.11.0 
    typescript: ^5.6.3 => 5.7.2 
    undici: ^6.21.0 => 6.21.0 
    vite: ^6.0.1 => 6.0.2

Additional Information

No response

[Nefcanto]

@wmertens this prevents us from upgrading to Vite 6 from Vite 5. I think there is a bug in @builder.io/qwik-auth. This is what I have found in my node_modules using grep -nr createHmac:

@panva/hkdf/dist/node/esm/runtime/fallback.js:1:import { createHmac } from 'crypto';
@panva/hkdf/dist/node/esm/runtime/fallback.js:4:    const prk = createHmac(digest, salt.byteLength ? salt : new Uint8Array(hashlen))
@panva/hkdf/dist/node/esm/runtime/fallback.js:14:        T.set(createHmac(digest, prk)
@panva/hkdf/dist/node/cjs/runtime/fallback.js:6:    const prk = (0, crypto_1.createHmac)(digest, salt.byteLength ? salt : new Uint8Array(hashlen))
@panva/hkdf/dist/node/cjs/runtime/fallback.js:16:        T.set((0, crypto_1.createHmac)(digest, prk)
@builder.io/qwik-auth/node_modules/jose/dist/node/esm/runtime/cbc_tag.js:1:import { createHmac } from 'node:crypto';
@builder.io/qwik-auth/node_modules/jose/dist/node/esm/runtime/cbc_tag.js:5:    const hmac = createHmac(`sha${macSize}`, macKey);
@builder.io/qwik-auth/node_modules/jose/dist/node/esm/runtime/sign.js:11:        const hmac = crypto.createHmac(hmacDigest(alg), k);
@builder.io/qwik-auth/node_modules/jose/dist/node/cjs/runtime/cbc_tag.js:8:    const hmac = (0, node_crypto_1.createHmac)(`sha${macSize}`, macKey);
@builder.io/qwik-auth/node_modules/jose/dist/node/cjs/runtime/sign.js:13:        const hmac = crypto.createHmac((0, hmac_digest_js_1.default)(alg), k);
cookie-signature/index.js:20:    .createHmac('sha256', secret)
@types/node/crypto.d.ts:7: * const { createHmac } = await import('node:crypto');
@types/node/crypto.d.ts:10: * const hash = createHmac('sha256', secret)
@types/node/crypto.d.ts:254:     *   createHmac,
@types/node/crypto.d.ts:259:     * const hmac = createHmac('sha256', 'a secret');
@types/node/crypto.d.ts:276:    function createHmac(algorithm: string, key: BinaryLike | KeyObject, options?: stream.TransformOptions): Hmac;
@types/node/crypto.d.ts:417:     * The {@link createHmac} method is used to create `Hmac` instances. `Hmac`objects are not to be created directly using the `new` keyword.
@types/node/crypto.d.ts:423:     *   createHmac,
@types/node/crypto.d.ts:426:     * const hmac = createHmac('sha256', 'a secret');
@types/node/crypto.d.ts:449:     *   createHmac,
@types/node/crypto.d.ts:452:     * const hmac = createHmac('sha256', 'a secret');
@types/node/crypto.d.ts:462:     *   createHmac,
@types/node/crypto.d.ts:465:     * const hmac = createHmac('sha256', 'a secret');
@types/node/crypto.d.ts:473:     * @deprecated Since v20.13.0 Calling `Hmac` class directly with `Hmac()` or `new Hmac()` is deprecated due to being internals, not intended for public use. Please use the {@link createHmac} method to create Hmac instances.
@types/node/crypto.d.ts:1206:     * underlying hash function. See {@link createHmac} for more information.
@types/node/crypto.d.ts:1230:     * underlying hash function. See {@link createHmac} for more information.
simple-get/README.md:287:  hash_function: (baseString, key) => crypto.createHmac('sha1', key).update(baseString).digest('base64')

Any ideas?

[wmertens]

Yes it's an issue because of vite 6 not ignoring node dependencies when building for client, the optimizer doesn't remove them in globalAction$.

I'm trying to fix in @auth/qwik but we may need a fix in the optimizer.

[Nefcanto]

@wmertens glad that you found the root problem. What is the optimizer?

[wmertens]

The qwik optimizer which splits the code in segments

[Nefcanto]

@wmertens could you look into this issue?

We had a similar situation somewhere else. We had this code:

import crypto from "crypto"
...
    let handle = url.replace(/\//ig, "_")
     handle = crypto?.createHash("md5")?.update(encodeURI(handle))?.digest("hex")

Then we changed it to this code to support both the server and the client environments:

// We removed the static import

const createHandle = async url => {
     let handle = url.replace(/\//ig, "_")
     handle = encodeURI(handle)
     const encoder = new TextEncoder()
     const data = encoder.encode(handle)
 
     if (typeof crypto !== "undefined" && crypto.subtle) {
         const hashBuffer = await crypto.subtle.digest("SHA-256", data)
         handle = Array.from(new Uint8Array(hashBuffer))
             .map(b => b.toString(16).padStart(2, "0"))
             .join("")
         return handle
     } else {
         const { createHash } = await import("node:crypto")
         handle = createHash("md5").update(handle).digest("hex")
         return handle
     }
 }

The problem solved with dynamic import based on the environment.

[Nefcanto]

@wmertens could you look into this issue?

[wmertens]

@Nefcanto I created a PR with the fix on the nextjs auth repo but it's being ignored.

You can use pnpm patch to apply the fix yourself

[wmertens]

nextauthjs/next-auth#12723

[Nefcanto]

@wmertens thank you so much. I saw your PR. What if I also post an issue there? Would that help?