seokju-na / react-thermal-printer

React for thermal printing
MIT License
288 stars 38 forks source link

Fix Module "stream" has been externalized for browser compatibility. Cannot access "stream.Transform" in client code. #32

Open Aycom366 opened 1 year ago

Aycom366 commented 1 year ago
const Render = (
  <Printer type='epson' width={42} characterSet='korea'>
    <Text size={{ width: 2, height: 2 }}>9,500원</Text>
    <Text bold={true}>결제 완료</Text>
    <Br />
    <Line />
    <Row left='결제방법' right='체크카드' />
    <Row left='카드번호' right='123456**********' />
    <Row left='할부기간' right='일시불' />
    <Br />
    <Text align='center'>Wifi: some-wifi / PW: 123123</Text>
    <Cut />
  </Printer>
);
function Invoice({ setPopup }: InvoiceProps) {
  const { state } = useContext(StoreContext);
  const { transaction, setTransaction } = useContext(OverlayContext);

  if (!transaction) setPopup(undefined);

  return (
    <Box
      position='absolute'
      right={0}
      top={0}
      w='350px'
      bg='bg'
      boxShadow='xl'
      px={4}
      py={6}
      h='100vh'
      maxH='100vh'
      borderLeftWidth={1}
      borderLeftColor='grey.300'
      zIndex={10}
    >
      <HStack
        // px={4}
        justify='space-between'
        w='100%'
        position='absolute'
        bottom={0}
      >
        <Button
          variant='secondary'
          onClick={() => {
            setTransaction(null);
            setPopup(undefined);
          }}
        >
          Back
        </Button>
        <HStack gap={4}>
          <Button
            onClick={async () => {
             //where am calling the print function
              const port = (await navigator.serial.requestPort());
              await port.open({ baudRate: 9600 });

              const writer = port.writable?.getWriter();
              if (writer != null) {
                await writer.write(Render);
                writer.releaseLock();
              }
            }}
            variant='secondary'
            leftIcon={<IoPrint fontSize='1rem' />}
          >
            Print
          </Button>
          <Button leftIcon={<IoShareSocialSharp />}>Share</Button>
        </HStack>
      </HStack>
    </Box>
  );
}

Am getting Module "stream" has been externalized for browser compatibility. Cannot access "stream.Transform" in client code.anytime I start the app which would literally crash the app. Am I doing something wrong? Please help