iconv-lite: EUC-JP, EUC-KR not recognized

[tamtranbluedragonvn]

TypeError: Cannot read properties of undefined (reading 'prototype') at node_modules/iconv-lite/encodings/internal.js

[mkdudeja]

getting the same issue. using react with vite.

[tamtranbluedragonvn]

@mkdudeja I don't remember how to fixed it. However, you can try delete node_modules folder, package-lock.json and yarn.lock

[mkdudeja]

@tamtranbluedragonvn tried everything, but no luck

[tamtranbluedragonvn]

@mkdudeja You can try.

import React, { useEffect } from "react";
import { Col, Card, Button, FormSelect } from "react-bootstrap";
import { useLocale } from "../hooks/useLocale";
import { useSerialPrinter } from "../hooks/useSerialPrinter";
import { Cut, Line, Printer, Text, Row } from "react-thermal-printer";
import BaseLayout from "../components/BaseLayout";
import { RtpTableRow } from "../components/react-thermal-printer-custom/RtpTableRow";
import useSerialPorts from "../hooks/useSerialPorts";
import getStorageComport from "../utils/getStorageComport";

const ComOptions = () => {
	const { ports } = useSerialPorts();
	return (
		<>
			<option value="-1">Auto</option>
			{ports.map((port: SerialPort, index) => {
				return (
					<option key={index} value={index}>
						Port {index + 1}
					</option>
				);
			})}
		</>
	);
};
const SettingPrinterPage: React.FC = () => {
	const { t } = useLocale();
	const { printerSetting } = useSerialPrinter();
	const content = (
		<Printer type="epson" width={42} characterSet="korea" debug={true}>
			<Text bold={true}>[사업장 정보]</Text>
			<RtpTableRow
				rowData={["Col1", "Col2", "Col3", "Col4"]}
				colPercentages={[40, 25, 10, 25]}
				gap={1}
				bold={true}
			/>
			<RtpTableRow
				rowData={["ProductNameDescriptionVeryLong", "25,000", "4", "100,000"]}
				colPercentages={[40, 25, 10, 25]}
				gap={1}
				alignRights={[false, true, true, true]}
			/>
			<RtpTableRow
				rowData={["adgquiwb 31sdsjk fh32", "25,000", "4", "100,000"]}
				colPercentages={[40, 25, 10, 25]}
				gap={1}
				alignRights={[false, true, true, true]}
			/>
			<RtpTableRow
				rowData={["kk oo asd", "25,000", "4", "100,000"]}
				colPercentages={[40, 25, 10, 25]}
				gap={1}
				alignRights={[false, true, true, true]}
			/>
			<Line character="=" />
			<Row left="사업장명:" right="아마존아쿠아파크 당진" gap={2} />
			<Row left="사업장번호:" right="611-85-08304" gap={2} />
			<Row left="전화번호:" right="041-430-8299" gap={2} />
			<Row left="주소:" right={<Text>충청남도 당진시 신평면</Text>} gap={2} />
			<Row left="" right={<Text>소창길 117</Text>} gap={2} />
			<Line character="=" />
			<Text bold={true}>[가맹점정보]</Text>
			<Line character="=" />
			<Row left="가맹점명:" right="(주)코어솔루션" gap={2} />
			<Row left="사업 No:" right="628-87-03015" gap={2} />
			<Row left="전화번호:" right="1522-4030" gap={2} />
			<Row left="단말 No:" right="7498287" gap={2} />
			<Row left="주소:" right={<Text>전북특별자치도 전주시</Text>} gap={2} />
			<Row left="" right={<Text>용머리로 80, 3층</Text>} gap={2} />
			<Cut />
		</Printer>
	);
	const [comPort, setComPort] = React.useState(-1);
	useEffect(() => {
		setComPort(getStorageComport());
	}, []);
	const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
		localStorage.setItem("comPort", e.target.value);
		setComPort(+e.target.value);
	};
	return (
		<BaseLayout>
			{/* There is no react-bootstrap element for d-flex so that we can keep it as div */}
			<div className="d-flex justify-content-center p-5 fs-20 mt-5">
				<Col>
					<Card>
						<Card.Header>
							<Card.Title>
								<h3 className="mb-0">{t("Setting")}</h3>
							</Card.Title>
						</Card.Header>
						<Card.Body>
							<Col xs={12} className="s">
								<p>{t("Print setting")}</p>
							</Col>

							<Col xs={12} className="s d-flex gap-2">
								<Col xs={12} sm={4} className="s">
									{" "}
									<FormSelect onChange={handleOnChange} value={comPort}>
										<ComOptions />
									</FormSelect>
								</Col>
								<Col xs={12} sm={4} className="s">
									<Button
										className="btn btn-success"
										variant="bordered"
										color="primary"
										onClick={() => {
											printerSetting({
												printContent: content,
											});
										}}
									>
										프린트
									</Button>
								</Col>
							</Col>
						</Card.Body>
					</Card>
				</Col>
			</div>
		</BaseLayout>
	);
};

export default SettingPrinterPage;

[hijjoy]

im getting the same issue. using react with vite. and i tried this

yarn add buffer stream-browserify

//vite.config.ts
   resolve: {
    alias: {
      buffer: "buffer",
      stream: "stream-browserify",
    },
  },
  define: {
    "process.env": {},
  },
  build: {
    rollupOptions: {
      external: ["stream"],
    },
  },

[seokju-na]

https://github.com/seokju-na/react-thermal-printer/issues/62#issuecomment-2488938545