Bug: Cannot convert BigInt value to a number.

[ritvij14]

This is a bug report

Problem

In our frontend platform at Huddle01 we are facing this bug on running yarn build.

On checking various packages we found that when we commented the usage of waku functions and deleted the waku package then this error wasn't showing up.

Here is all the code related to waku functionality that we are using.

wakuUtils.js

import protons from "protons";
const proto = protons(`
    message SimpleChatMessage {
      uint64 timestamp = 1;
      string text = 2;
      string sender = 3;
    }
  `);

const selectFleetEnv = () => {
  // Works with react-scripts
  if (process?.env?.NODE_ENV === "development") {
    return ["fleets", "wakuv2.test", "waku-websocket"];
  } else {
    return ["fleets", "wakuv2.prod", "waku-websocket"];
  }
};

const processMsgs = (msg) => {
  if (!msg.payload) return;

  const { timestamp, text, sender } = proto.SimpleChatMessage.decode(
    msg.payload
  );

  const time = new Date(timestamp).toLocaleTimeString();

  const utf8Text = Buffer.from(text).toString("utf-8");

  return { timestamp: time, text: utf8Text, sender };
};

export { proto, selectFleetEnv, processMsgs };

Parts of code where we used waku in our live stream chats:

// creating waku object
  useEffect(() => {
    if (!isLivestreamChat) return;
    if (!!waku) return;
    if (wakuStatus !== "None") return;

    setWakuStatus("Starting");

    // Create Waku
    Waku.create({
      libp2p: {
        config: {
          pubsub: {
            enabled: true,
            emitSelf: true,
          },
        },
      },
      bootstrap: getBootstrapNodes.bind({}, selectFleetEnv()),
    }).then((waku) => {
      setWaku(waku);
      setWakuStatus("Started");
      waku.waitForConnectedPeer().then(() => {
        setWakuStatus("Ready");
        console.log(wakuStatus);
      });
    });
    console.log(wakuStatus);
  }, [waku, wakuStatus]);

  const processWakuHistory = (retrievedMessages) => {
    const messages = retrievedMessages
      .map((msg) => processMsgs(msg))
      .filter(Boolean);

    setWakuMsgs((waku) => {
      return messages.concat(waku);
    });

    if (wakuMsgs.length >= 20) return true;
  };

  // fetching history of chats from waku-store
  useEffect(() => {
    if (wakuStatus !== "Ready") return;

    waku.store
      .queryHistory([ContentTopic], { callback: processWakuHistory })
      .catch((e) => {
        console.log("Failed to retrieve messages", e);
      });
    dispatch(setWakuStoreRetrieved(true));
  }, [waku, wakuStatus]);

  // sending message using waku-relay
  const handleWakuMessage = async (msgInput) => {
    if (!isLivestreamChat) return;
    if (wakuStatus !== "Ready") return;
    if (!msgInput) return;

    const text = msgInput.trim();

    const payload = proto.SimpleChatMessage.encode({
      timestamp: new Date(),
      text: text,
      sender:
        localStorage.getItem("livestream_viewer") ||
        window.ethereum.selectedAddress,
    });

    WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
      waku.relay.send(wakuMessage)
    );
    console.log(payload);
  };

  // observer for receiving messages
  const processIncomingMessage = useCallback((wakuMessage) => {
    const message = processMsgs(wakuMessage);
    setWakuMsgs((messages) => {
      return messages.concat(message);
    });
  }, []);

  // receive message using waku-relay
  useEffect(() => {
    if (!waku) return;

    waku.relay.addObserver(processIncomingMessage, [ContentTopic]);

    return function cleanUp() {
      waku.relay.deleteObserver(processIncomingMessage, [ContentTopic]);
    };
  }, [waku, wakuStatus, processIncomingMessage]);

Notes

• js-waku version: 0.14.2

[D4nte]

1. Are you able to create a minimum, reproducible example?
2. The error show seem to be for react prod build, does the error happen for a dev build too? If so, what is the error? A dev build should help pinpoint the exact line that is an issue.

[ritvij14]

1. Yes we can reproduce it.
2. No it only breaks on prod, when we try to serve the prod build.

[D4nte]

1. Great, please publish the minimal, reproducible example so I can further investigate.

[D4nte]

FYI, this is what i am referring to https://stackoverflow.com/help/minimal-reproducible-example

[D4nte]

Bug also occurs with chat demo: https://status-im.github.io/js-waku/

[D4nte]

Leads:

• Usage with Create React App starknet-io/starknet.js#37 (comment)
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#browser_compatibility
• Support environments without native bigint hirosystems/stacks.js#1096 (comment)

[D4nte]

I was able to reproduce in the web-chat example by setting the browsers.list.development property of package.json to the same value than browserslist.production:

    "development": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]

and deleting the cache: rm -rf node_modules/.cache:

TypeError: can't convert BigInt to number
../../node_modules/@noble/ed25519/lib/esm/index.js
src/status-im/js-waku/node_modules/@noble/ed25519/lib/esm/index.js:11

   8 | const CURVE = {
   9 |     a: BigInt(-1),
  10 |     d: BigInt('37095705934669439343138083508754565189542113879843219016388785533085940283555'),
> 11 |     P: _2n ** _255n - BigInt(19),
  12 |     n: _2n ** BigInt(252) + BigInt('27742317777372353535851937790883648493'),
  13 |     h: BigInt(8),
  14 |     Gx: BigInt('15112221349535400772501151409588531511454012693041857206046113283949847762202'),

[D4nte]

I was able to solve the issue in development with:

    "development": [
      ">0.2%",
      "not ie <= 99",
      "not android <= 4.4.4",
      "not dead",
      "not op_mini all"
    ]

Will apply to prod and see if it works in GH pages.

[D4nte]

Here is the upstream issue: paulmillr/noble-ed25519#23

[D4nte]

▶ npm ls @noble/ed25519
js-waku@0.14.2 /home/froyer/src/status-im/js-waku
├─┬ @chainsafe/libp2p-noise@5.0.0
│ └─┬ peer-id@0.16.0
│   └─┬ libp2p-crypto@0.21.0
│     └── @noble/ed25519@1.3.3
└─┬ libp2p-gossipsub@0.12.1
  └─┬ libp2p-interfaces@2.0.6
    └─┬ libp2p-crypto@0.21.0
      └── @noble/ed25519@1.3.3 deduped

[D4nte]

Unfortunately, setting the following in the package.json of web-chat did not fix it in GH pages. Not sure if it's an issue with some caching, I need to investigate further.

"browserslist": { 
   "development": [
      ">0.2%",
      "not ie <= 99",
      "not android <= 4.4.4",
      "not dead",
      "not op_mini all"
    ]
}

@ritvij14 can you try this solution with your project and let me know if it helps?

[ritvij14]

@D4nte yes ok let me try this on our system today, I will get back to you on this soon.

[D4nte]

@D4nte yes ok let me try this on our system today, I will get back to you on this soon.

Great. Be sure to delete your node_modules to be sure it does not use the cache.

[ritvij14]

Unfortunately, setting the following in the package.json of web-chat did not fix it in GH pages. Not sure if it's an issue with some caching, I need to investigate further.
"browserslist": {
"development": [
">0.2%",
"not ie <= 99",
"not android <= 4.4.4",
"not dead",
"not op_mini all"
]
}
@ritvij14 can you try this solution with your project and let me know if it helps?

@D4nte I added this thing like this:

"production": [
      ">0.2%",
      "not ie <= 99",
      "not android <= 4.4.4",
      "not dead",
      "not op_mini all"
    ],

and on doing yarn build && npx serve -s build, it ran without problems. But I am still kind of confused as to how did doing this help.

[D4nte]

@ritvij14 please have a look at at what browserslist does. My understanding is that it set the browser target for which the code is transpiled to.
">0.2%" for example means: transpile code from browser that has a market share of more than 0.2% (I think).

This included all browsers that do not support BigInt such as ie 98 and below and android 4.4.3 and below.
Which mean the transpiled code did not contain definition of BigInt. Hence the error.

By restricting the browser target to more recent browser, it allowed the use of BigInt.

Keeping this issue open to track documentation effort.

[D4nte]

Documented in the ReactJS doc: waku-org/js.waku.guide#19
Also this issue can serve as documentation.

[matbee-eth]

So what's the fix? I see a scattering of messages with nothing definitive. I get the issue with production react builds.

[ritvij14]

@D4nte I added this thing like this:

"production": [
      ">0.2%",
      "not ie <= 99",
      "not android <= 4.4.4",
      "not dead",
      "not op_mini all"
    ],

and on doing yarn build && npx serve -s build, it ran without problems. But I am still kind of confused as to how did doing this help.

@matbee-eth this is what you need to do. Add this in package.json

[Joshua-alt]

@D4nte
your fix just saved my day,thank
I change in my package.json
"production": [
">0.2%",
"not ie <= 99",
"not android <= 4.4.4",
"not dead",
"not op_mini all"
],
thanks thanks thank

[Shashank729]

I wasted 2 days on trying to fix it, tried everything from package update to cache clean. Nothing worked. Then saw this and implemented it and now it works. Thank you so much for saving my day!

Thanks a ton!

[fryorcraken]

Hi, really sorry to hear you wasted time on this issue. Are you using @waku/core or js-waku npm packages? js-waku is now deprecated.