javascript web serial api

Question

i'm working on project i need from client to connect to serial port of Weighing machine scale and click on another button to get data in realtime in one line without using any library like node Serialport

`

<script setup>
import { Head, Link } from "@inertiajs/vue3";
import { ref } from "@vue/reactivity";
import {SerialPort} from 'serialport'

function connectToSerialPort(portName) {
  const port = new SerialPort(portName, { baudRate: 9600 });
  
  port.on('error', function(err) {
    console.log('Error: ', err.message);
  });

    port.on('data', function(data) {
    console.log('Data:', data.toString());
  });
  
  console.log(`Connecting to serial port ${portName}...`);
}
connectToSerialPort('COM4');
</script>

dex.js:10 Uncaught (in promise) TypeError: Class extends value undefined is not a constructor or null
    at node_modules/@serialport/parser-byte-length/dist/index.js (index.js:10:41)
    at __require2 (chunk-NKHIPFFU.js?v=b0a45716:15:50)
    at node_modules/serialport/dist/index.js (index.js:13:14)
    at __require2 (chunk-NKHIPFFU.js?v=b0a45716:15:50)
    at index.js:24:46
n`

Answer 1

It seems that you are trying to use a package meant to be used on the backend, in Node.js:

https://serialport.io/docs/

on the frontend (in your Vue-based frontend code).

This will not work, you will have to create a Node.js-based backend to use the package, you can then communicate with the backend from the frontend using a REST-api or something similar.

One alternative, if your app could just as well be be a desktop application rather than a web site, would be to use Electron: https://www.electronjs.org (Electron is basically a Chromium browser and Node.js thrown together for desktop app development)