( Ionic 6 ) ReferenceError: ThermalPrinter is not defined

[a-satyateja]

Unable to trigger print on Ionic 6.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
import { ThermalPrinterPlugin } from 'thermal-printer-cordova-plugin/src';

// eslint-disable-next-line @typescript-eslint/naming-convention, no-var
declare var ThermalPrinter: ThermalPrinterPlugin;

@Component({
  selector: 'app-folder',
  templateUrl: './folder.page.html',
  styleUrls: ['./folder.page.scss'],
})
export class FolderPage implements OnInit {
  public folder: string;
  devices = [];
  constructor(
    private activatedRoute: ActivatedRoute // private bluetoothSerial: BluetoothSerial
  ) {}

  printCatch() {
    try {
      console.log(ThermalPrinter || 'ee');
      this.print();
    } catch (error) {
      alert(error);
    }
  }
  print() {
    const formattedText =
      '[C]<u><font size="big">ORDER N°045</font></u>\n' +
      '[L]\n' +
      '[C]================================\n' +
      '[L]\n' +
      '[L]<b>BEAUTIFUL SHIRT</b>[R]9.99e\n' +
      '[L]  + Size : S\n' +
      '[L]\n' +
      '[L]<b>AWESOME HAT</b>[R]24.99e\n' +
      '[L]  + Size : 57/58\n' +
      '[L]\n' +
      '[C]--------------------------------\n' +
      '[R]TOTAL PRICE :[R]34.98e\n' +
      '[R]TAX :[R]4.23e\n' +
      '[L]\n' +
      '[C]================================\n' +
      '[L]\n' +
      '[L]Raymond DUPONT\n' +
      '[L]5 rue des girafes\n' +
      '[L]31547 PERPETES\n' +
      '[L]Tel : +33801201456\n';

    ThermalPrinter.listPrinters(
      { type: 'bluetooth' },
      (printers) => {
        if (printers.length > 0) {
          alert(printers);
        } else {
          alert('no printers;');
        }
      },
      (e) => alert(e)
    );
    ThermalPrinter.printFormattedText(
      {
        type: 'bluetooth',
        id: 'first', // You can also use the identifier directly i. e. 00:11:22:33:44:55 (address) or name
        text: formattedText,
      },
      () => {
        alert('Successfully printed!');
      },
      (error) => {
        alert(error);
      }
    );
  }
}

[JuanFCVal]

Did u find the solution? Have u try using let in declare let ThermalPrinter: ThermalPrinterPlugin; Try re-installing dependency in my case it was the solution.

[joseserrano15]

Did you find the solution? I tried re-installing dependency as JuanFCVal said but didn't work

[a-satyateja]

No that wasn't working for me @joseserrano15. @JuanFCVal Can you please share any code snippets to shed more light on this? TIA.

[JuanFCVal]

In package.json

{
devDependencies:{
...
    "thermal-printer-cordova-plugin": "^1.0.6",.
},
"cordova": {
...
      "thermal-printer-cordova-plugin": {}
}
}

Then in the class you are going to use it.

...
import { PrinterToUse, ThermalPrinterPlugin } from 'thermal-printer-cordova-plugin/src';
declare let ThermalPrinter: ThermalPrinterPlugin;

[JayRmz]

Did you manage to solve this? I'm having the exact same issue.

[joseserrano15]

@JayRmz Unfortunately I couldn't. I tried as @JuanFCVal said but for me didn't work.

[JuanFCVal]

This is working for me, @JayRmz @joseserrano15 please look at this [Repo] (https://github.com/Ans0n-Ti0/esc-pos-encoder-ionic-demo) working on Ionic 6, it's another approach to achieve printing.

[ayubUOL]

Did anyone manage to solve this issue, please ?

[iborschca]

I am getting this error because webpack didn't import the module because in my case I am developing for iOS but this module doesn't have iOS support - only Android. Going to switch to another module doesn't know which one yet.

[piotrdanilowicz]

Has anyone managed to solve this problem?

The only workaround I've found so far is to use:

https://github.com/Ans0n-Ti0/EscPosEncoderi + https://ionicframework.com/docs/v5/native/bluetooth-serial

[ayubUOL]

Workaround(Android Only) (LAN connectivity) for me is to use Printer Plugin With Socket Plugin

[WingsDevelopment]

It seems to me that your code is not good...

I've moved call of printFormattedText inside listPrinters, because that is asynchronus... And managed to trigger printer like this:

"use client";
import { Share } from "@capacitor/share";
import React, { useRef, useState } from "react";
import {
  Printer,
  ThermalPrinterPlugin,
} from "thermal-printer-cordova-plugin/src";
// import ThermalPrinterPlugin from "thermal-printer-cordova-plugin/www/thermal-printer.js";
declare let ThermalPrinter: ThermalPrinterPlugin;

export const Example = () => {
  const [printers, setPrinters] = useState<Printer[]>([]);

  const handlePrint = () => {
    const formattedText =
      '[C]<u><font size="big">ORDER N°045</font></u>\n' +
      "[L]\n" +
      "[C]================================\n" +
      "[L]\n" +
      "[L]<b>BEAUTIFUL SHIRT</b>[R]9.99e\n" +
      "[L]  + Size : S\n" +
      "[L]\n" +
      "[L]<b>AWESOME HAT</b>[R]24.99e\n" +
      "[L]  + Size : 57/58\n" +
      "[L]\n" +
      "[C]--------------------------------\n" +
      "[R]TOTAL PRICE :[R]34.98e\n" +
      "[R]TAX :[R]4.23e\n" +
      "[L]\n" +
      "[C]================================\n" +
      "[L]\n" +
      "[L]Raymond DUPONT\n" +
      "[L]5 rue des girafes\n" +
      "[L]31547 PERPETES\n" +
      "[L]Tel : +33801201456\n";

    ThermalPrinter.listPrinters(
      { type: "bluetooth" },
      (printers) => {
        if (printers.length > 0) {
          setPrinters(printers);
          ThermalPrinter.printFormattedText(
            {
              type: "bluetooth",
              id: printers[0].address ?? "SimulatePrinter",
              text: formattedText,
            },
            () => {
              alert("Successfully printed!");
            },
            (error) => {
              alert(error);
            }
          );
        } else {
          alert("no printers;");
        }
      },
      (e) => alert(e)
    );
  };

  return (
    <div>
      this is some kind of a test kekw
      <button
        style={{
          margin: "5px",
          border: "black",
          color: "yellow",
        }}
        onClick={handlePrint}
      >
        Print Order
      </button>
      <pre>{JSON.stringify(printers, null, 2)}</pre>
    </div>
  );
};

hope this helps.. happy hacking!