Issue with using react-thermal-printer with local IP printers

[Hx-Regex]

Issue Description

(im using nextjs 14) I'm trying to work with local IP printers, specifically ECS/POS printers, using the react-thermal-printer library. Following the provided example code:

import { render, Printer, Text, Cut } from 'react-thermal-printer';
import { connect } from 'node:net';

const data = await render(
  <Printer type="epson" width={42}>
    <Text>Hello World</Text>
    <Cut />
  </Printer>
);

const conn = connect({
  host: '192.168.0.99',
  port: 9100,
  timeout: 3_000,
});
conn.write(Buffer.from(data), () => {
  conn.destroy();
});
conn.on('error', ...);
conn.on('timeout', ...);

However, when running this code in my Node.js environment (v21.6.1), I encounter the following error:

SyntaxError: Unexpected token '<'
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:168:18)
    at callTranslator (node:internal/modules/esm/loader:279:14)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:285:30)
    at async link (node:internal/modules/esm/module_job:76:21)

It seems like there's an issue with the syntax when using JSX within a Node.js environment.

Request for Assistance

I'm unsure if I'm using the library incorrectly or if there's a compatibility issue with my setup. Any assistance or guidance on how to properly utilize react-thermal-printer with local IP printers would be greatly appreciated. I'm currently working on a personal project where this functionality is crucial.

Thank you for your time and assistance.

[araaso-dev]

Hello @Hx-Regex have you got the issue fixed? I'm trying to print on thermal printers as well, have you got a better solution?

[seokju-na]

JSX is not supported in a typical JS environment. You need to transpile JSX using Babel, webpack, esbuild, etc.