Arduino считывает последовательный монитор с помощью NodeJS и выводит на веб-страницу React

Моя цель

У меня есть ультразвуковой датчик (HC-SR05), который измеряет расстояние до объекта, на который он смотрит. Он выводит данные измерений на последовательный монитор со скоростью 9600 бод. Затем у меня есть компонент React, который извлекает данные с помощью библиотеки SerialPort и помещает эти данные в некоторое состояние, называемое «данные». Моя цель - отобразить эти данные на веб-странице.

Что я пробовал

Я попробовал код в обычном файле JS без React, и он смог вывести данные с последовательного монитора на консоль.

Код

Мой компонент React выглядит так:

import SerialPort from 'serialport';
import Readline from '@serialport/parser-readline';

const port = new SerialPort('/dev/cu.usbmodemFA141', { baudRate: 9600 });
const parser = port.pipe(new Readline({ delimiter: '\n' }));
port.on("open", () => {
  console.info('serial port open');
});

const App = () => {

  const [data, setData] = useState('');

  parser.on('data', serialData => {
    setData(serialData)
  });

  return (
    <div className = "App">
      <p>Distance: {data}</p>
    </div>
  );
}

Ожидаемый и фактический результат

Ожидаемый результат заключался в том, что компонент извлекал данные из последовательного монитора, приводил их в состояние и отображал на веб-странице. Я использовал состояние для повторного рендеринга веб-страницы при обновлении данных.

Фактический результат заключался в том, что он выдал мне это сообщение об ошибке, когда я выводил данные на веб-страницу:

TypeError: Error.captureStackTrace is not a function
getFileName
node_modules/bindings/bindings.js:135

  132 | }; // run the 'prepareStackTrace' function above
  133 | 
  134 | 
> 135 | Error.captureStackTrace(dummy);
      | ^  136 | dummy.stack; // cleanup
  137 | 
  138 | Error.prepareStackTrace = origPST;

bindings
node_modules/bindings/bindings.js:59

  56 | }); // Get the module root
  57 | 
  58 | if (!opts.module_root) {
> 59 |   opts.module_root = exports.getRoot(exports.getFileName());
     | ^  60 | } // Ensure the given bindings name ends with .node
  61 | 
  62 | 

./node_modules/@serialport/bindings/lib/linux.js
node_modules/@serialport/bindings/lib/linux.js:1

> 1 | const binding = require('bindings')('bindings.node');
  2 | 
  3 | const AbstractBinding = require('@serialport/binding-abstract');
  4 | 

...

Мой вопрос

Почему он выдает эту странную ошибку, когда работает вне React, и что я сделал не так?

Примечание. Это ошибка React.