setup guide for nextjs?

[Elon-Mask12]

hey, anyone managed to get it working in nextjs pages dir? heres what ive tried: imported as:

// @ts-ignore
import scribe from "scribe.js-ocr/scribe.js";

//other code
await scribe.init({ ocr: true, font: true });
scribe.extractText(files).then((res: any) => console.log(res));

i see error saying:

Import trace for requested module:
./node_modules/.pnpm/scribe.js-ocr@0.2.6_typescript@5.3.3/node_modules/scribe.js-ocr/scribe.js
./src/components/upload-file-modal.tsx
./src/pages/f/index.tsx
 ○ Compiling /not-found ...
 ⨯ ./node_modules/.pnpm/scribe.js-ocr@0.2.6_typescript@5.3.3/node_modules/scribe.js-ocr/js/containers/fontContainer.js:14:26
  Module not found: Can't resolve 'module'

i updated my next.config to pass custom webpack configs similar to the one in the example app, but it doesnt work. also tried passing it in. also tried nextjs serverComponentsExternalPackages in next.config, which doesnt work either.

  experimental: {
    serverComponentsExternalPackages: [
      "scribe.js-ocr",
      "scribe.js-ocr/scribe.js",
    ],
  },

tesseract seems to have a createWorker method, which is used in the client-side, maybe is it possible to expose something similar?.

any help is appreciated thanks.

[Balearica]

I generated a repo using npx create-next-app@latest, added some basic scribe.js code, and updated the webpack configuration, and everything seemed to run as expected. The repo is here.

[Elon-Mask12]

holy fuck, that works. also thanks a fuckton for building this library, and even replying to my query. <3

i got it workin on my next app, but im having few doubts. so here im writing this function which takes a pdf in File type and then return the ocr-ed version of the pdf in file type. So this will be the code right?

await scribe.init({ ocr: true, font: true });
scribe.opt.displayMode = "invis";

await scribe.importFiles(
  files,
);
await scribe.recognize({
  mode: "quality",
  langs: ["eng"],
  modeAdv: "combined",
  vanillaMode: true,
  combineMode: "data",
});
const data = await scribe.exportData("pdf");

const blob = new Blob([data], { type: "application/pdf" });
const file = new File([blob], "test.pdf", {
  type: "application/pdf",
});
return [file];

or am i doing something wrong, the docs seems a bit hard to understand. this seems to take around 33 seconds in my next app, but only around 6-7 seconds on the scribeocr.com website.

regarding the options i passed in for each, its just something that worked for me when i was playing around with https://scribeocr.com . am i doing something wrong? thanks :)