react-thermal-printer
react-thermal-printer copied to clipboard
Fix Module "stream" has been externalized for browser compatibility. Cannot access "stream.Transform" in client code.
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