Doesn't work with react

My App.tsx’s constructor looks like the following in my react app

constructor() {
    super();
    figlet('Sezzle', 'Standard', function(err, data) {
      if (err) {
          console.log('Something went wrong...');
          console.dir(err);
          return;
      }
      console.log(data);
    });
  }

But the output in the console is

Error: FIGlet header contains invalid values.
    at Function.me.parseFont (eval at ./node_modules/figlet/lib/figlet.js (http://localhost:3000/main.js:969:1), <anonymous>:842:19)
    at eval (eval at ./node_modules/figlet/lib/figlet.js (http://localhost:3000/main.js:969:1), <anonymous>:951:31)
    at <anonymous>

I logged in the node module’s parseFont function and I see that the headerData looks like this: ["<!doctype", "html>"] which is why the opts in the function is not being filled.

Please help.

[patorjk]

For apps that use webpack, I’ve added a directory of importable-fonts, they can be used like this:

import figlet from 'figlet';
import standard from 'figlet/importable-fonts/Standard.js'

figlet.parseFont('Standard', standard);

figlet.text('test', {
    font: 'Standard',
}, function(err, data) {
    console.log(data);
});

It seems to work well for me so far, I’m still doing testing on it so I haven’t publicly documented this (though the importable-fonts are in the latest npm release), but this will most likely be the best way to use the library with React.

[lis355]

I’ve found a solution, but I’m coding in Vue, I think i doesn’t matters

1. Put a needed front to your public directory
2. In app root (when app starts) use figlet.defaults

import figlet from "figlet";
...
figlet.defaults({fontPath: window.location.origin + "/assets/ascii-fonts"});

1. Then just code! But you can use only asyncronous callback-version

	figlet.text(this.$data.text, {
		font: "ANSI Shadow",
		horizontalLayout: "default",
		verticalLayout: "default"
	}, (error, renderedText) => {
		this.$data.renderedText = renderedText;
	});