Skip to content

Top-level await disables Nextjs HMR #158

@rnbrady

Description

@rnbrady

Using Libauth in a Nextjs project disables Fast Refresh, the successor to hot module reloading (HMR).

Image

This seems to be triggered by the top-level await in src/lib/crypto/default-crypto-instances.ts. It seems to be a known issue with Nextjs and is only a DX issue and only when when working on interactive frontends such as Cashflow.

The issue is reproduced in this repo.

It doesn't help to bypass the default crypto instances like this:

import { instantiateSha256 } from "@bitauth/libauth/build/lib/crypto/sha256";
import { binToHex } from "@bitauth/libauth/build/lib/format/hex";

Perhaps the main entry point of the package is run to create the tree prior to tree shaking.

A workaround is to use Libauth v1. This must be done for dependencies that use Libauth too:

  "dependencies": {
    "@bitauth/libauth": "^1.19.1",
  },
  "pnpm": {
    "overrides": {
      "chaingraph-ts>@bitauth/libauth": "^1.19.1"
    }
  },

For an example see Cashflow, which also required a workaround to the workaround.

Raising here for discussion and will create a new issue with Nextjs too.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions