How to Define TextdecoderStream and TextEncoderStream while using Web Serial in react?

Question

My code is like this in react when i run it, it says TextDecoderStream() & TextEncoderStream() is not defined.

async function connect() {
const port = await navigator.serial.requestPort();
// - Wait for the port to open.
await port.open({ baudRate: 115200 });
console.log("Open");


 let decoder = new TextDecoderStream();
  inputDone = port.readable.pipeTo(decoder.writable);
  inputStream = decoder.readable;

 const encoder = new TextEncoderStream();
  outputDone = encoder.readable.pipeTo(port.writable);
  outputStream = encoder.writable;

 let reader = inputStream.getReader();
}

getting error

    src\Components\play\Remote\Ace\RemoteSection\RemoteSection.js
    Line 453:23:  'TextDecoderStream' is not defined  no-undef
     Line 457:25:  'TextEncoderStream' is not defined  no-undef

And if i remove stream and only use TextDecoder() and TextEncoder() then it is showing

 Unhandled Rejection (TypeError): Failed to execute 'pipeTo' on 
 'ReadableStream': parameter 1 is not of type 'WritableStream'.

  Unhandled Rejection (TypeError): Cannot read properties of undefined 
  (reading 'pipeTo')

Answer 1

TextDecoderStream and TextEncoderStream are available in Chrome 71 according to https://chromestatus.com/features/4881011259211776.

I suspect your issue is a linter issue. You may want to try this eslint rule as documented at https://eslint.org/docs/rules/no-undef.

   // eslint-disable-next-line no-undef
   let decoder = new TextDecoderStream();

   ...

   // eslint-disable-next-line no-undef
   const encoder = new TextEncoderStream();