Bug: Cannot convert BigInt value to a number.

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

[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.