need some help :)

[MrEmanuel]

Hi! Awesome package! But, I need some help to get it working in my vite, react app.

First off, running the example app works great! So far so good. However, when I try to implement it i my app, stuff gets tricky. I tried to call the run-function in multiple ways, but no success so far. I tried importing the module in my .jsx files and running the function, but no luck. To fault trace, I decided to copy the example app as far as possible. This led me to get an error that might make sense to you.

I'm running a simple vite react-ts project, installed using pnpm, following these instructions: https://vitejs.dev/guide/#scaffolding-your-first-vite-project

pnpm create vite my-vue-app -- --template react-ts

This is one of the ways I tried to implement wasm-pdf:

1. I copy the files index.js, bootstrap.js, to a folder /src/PDF/, and update all the paths accordingly.
2. Add a simple js-object inline, in bootstrap.js, because I can't be bothered adding the test-file to vite config, etc. ^^ bootstrap.js now looks like this:

   
   import("./index.js")
   .then((wasm) => {
   let doc = {
     title: "Example Document",
     contents: [
       {
         obj_type: "Paragraph",
         params: {
           text: "Hello World!",
           font_size: 18,
           leading: 24,
           align: "center",
           font_name: "Helvetica-Bold",
         },
       },
     ],
   };
   // Change the title to show date (now)
   let date = new Date().toLocaleString();
   let title = doc.contents[0].params;
   title.text += " (created: " + date + ")";
   wasm.createPDF(doc);
   })
   .catch((e) => console.error("Error importing `index.js`:", e));

3.  I add the htlm-script tags to my body in `index.html`, like so: 

Now comes the fun part. The console error message: 

Uncaught (in promise) undefined wasm_pdf_bg.js:140:32 run2 wasm_pdf_bg.js:140 createPDF index.js:18 (Async: promise callback) createPDF index.js:7 (Async: promise callback) createPDF index.js:5

bootstrap.js:22 (Async: promise callback) bootstrap.js:2 ``` Cool! I'm actually reaching the `run`-function! But something's wrong and I can't figure it out. Telling firefox to break on exception gives me this:  Dunno if it's useful information but if I let it run and stop it at line 140 I get this  And  I'm guessing the first way I tried to implement it didn't work because of the same reason. However, I couldn't get any useful information from that. Just an empty error message:  Here's that first, preferred implementation: ``` const wasm_pdf = import("wasm-pdf"); const testDoc = { title: "Example Document", contents: [ { obj_type: "Paragraph", params: { text: "Hello World!", font_size: 18, leading: 24, align: "center", font_name: "Helvetica-Bold", }, }, ], }; const createPDF = (jsDocument: Object) => { wasm_pdf .then((pdf) => { pdf.run(jsDocument); }) .catch(console.error); }; createPDF(testDoc); ``` Any help on how to fix this would be greatly appreciated. I'll try to set up a repo to reproduce it.

[MrEmanuel]

Ok. Here's the repo. I'm running it using the package manage pnpm, but I just checked and it also works fine with yarn.

git clone git@github.com:MrEmanuel/wasm-pdf-react-vite-test.git cd wasm-pdf-react-vite-test yarn yarn dev

or instead of yarn pnpm install pnpm dev

The only things I added was a wasm plugin in vite.config.ts and these lines in App.tsx

const wasm_pdf = import("wasm-pdf");

const testDoc = {
  title: "Example Document",
  contents: [
    {
      obj_type: "Paragraph",
      params: {
        text: "Hello World!",
        font_size: 18,
        leading: 24,
        align: "center",
        font_name: "Helvetica-Bold",
      },
    },
  ],
};

const createPDF = (jsDocument: Object) => {
  wasm_pdf
    .then((pdf) => {
      console.log("Calling pdf.run... ");
      pdf.run(jsDocument);
    })
    .catch((e) => {
      console.error("Error creating pdf: ", e);
    });
};

Much appreciated if you can help me figure this out! Thanks! :)

[jussiniinikoski]

Did you have a look at wasm-pdf-app? Unfortunately I have no experience integrating this with Vite or other build processes.

[MrEmanuel]

I did. The first implementation was based on that. I was hoping you would know something about the wasm-related errors on line 140.

Dunno, but maybe a minimum thing would be to hoist the error in the "finally"-block upwards? :) Anyways, if you could clone the repo and run the app and have a look I would really appreciate it. But if not, I totally understand. No worries. I'll find another way.

Thanks again. Cheers!

[Aditya1942]

hey, I have implemented wasm-pdf in angular. I used javascript CustomEvent in index.html
you can do something similar with react

my angular repo 👇 https://github.com/Aditya1942/angular-wasm-pdf