Borsh Serialization fails in React Application

Question

This script fails to deserialize my Object. Error was TypeError: this.buf.readUInt32LE is not a function

TypeError: this.buf.readUInt32LE is not a function
    at BinaryReader.readU32 (index.js:165)
    at BinaryReader.propertyDescriptor.value (index.js:136)
    at BinaryReader.readString (index.js:194)
    at BinaryReader.propertyDescriptor.value (index.js:136)
    at deserializeField (index.js:341)
    at deserializeStruct (index.js:385)
    at Object.deserialize (index.js:403)
    at hello (App.js:52)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

This works fine on CodesandBox but fails on the local machines.

const borsh = require("borsh");

class Assignable {
  constructor(properties) {
    Object.keys(properties).map((key) => {
      return (this[key] = properties[key]);
    });
  }
}

class Task extends Assignable { }

export default function App() {
  const example = {
    id: "12",
    assignee: "Sai",
    project_id: "ABX",
    name: "Hello",
    description: "Sample task Example",
    status: "NOT DONE"
  };

  const schema = new Map([
    [
      Task,
      {
        kind: "struct",
        fields: [
          ["id", "string"],
          ["name", "string"],
          ["description", "string"],
          ["assignee", "string"],
          ["project_id", "string"],
          ["status", "string"]
        ]
      }
    ]
  ]);
  function hello() {
    const task = new Task({
      id: example.id,
      name: example.name,
      description: example.description,
      assignee: example.assignee,
      project_id: example.project_id,
      status: example.status
    });
    console.log(task);
    const buf = borsh.serialize(schema, task);
    console.log(buf);
    try {
      const newValue = borsh.deserialize(schema, Task, buf);
      console.log(newValue);
    } catch (error) {
      console.log(error);
    }
  }
  return (
    <div className="APPLE">
      <button onClick={hello}>Create</button>
    </div>
  );
}

Answer 1

I looked at the dependencies in the codesandbox page and it imports globally the buffer package. I tried doing the same locally with require('buffer/'), but no luck. However, it works using it as const Buffer = require('buffer/').Buffer and calling the method Buffer.from to get the buffer from the serialized data.

const Buffer = require('buffer/').Buffer
...
const buf = Buffer.from(borsh.serialize(schema, task));