onedoclabs / react-print-pdf Goto Github PK

When I hosted my Nextjs 14 website on vercel, I was generating the pdf on a server component using tailwincss in the pdf template component.

It worked well on my computer but was throwing errors when hosted. I then changed it to generate on the backend using a route handler and I got an error saying that a particular tailwindcss module couldn't be found.

I changed the styling to plain CSS and I got a status 500 error. All this time, it worked perfectly on my computer so I wonder why it doesn't work when hosted on vercel.

Looks like os.platform is not available by default

❯ node --version
v20.6.1

❯ npm --version
np9.8.1

Trying to import Tailwind component according to this documentation results in error:
Cannot find module '@onedoc/react-print/server' or its corresponding type declarations.
I am trying to use it in Next.js server side components.

so i started reading the docs of this project specifically the getting started part and at page
page
a tag called index.jsx is used instead of index.tsx minor mistake but yeah should be fixed

I have tried to make a CV template . You can see the code using this github gist:
https://gist.github.com/career-tokens/990b71d0d4a74e0795de5e3fc888b7a9

Here you will find that I have used justify-evenly and gap in some places . I have also checked that they are working fine when I am simply rendering it as a page instead of pdf.

But when I am trying to see the pdf version of it using react-print-pdf , they are not working .
(Font too seems to be an issue but I have addressed it in another issue)

In the above image you can see the difference , left is the pdf and right is the normal rendering .

This issue if solved can improve developer experience since otherwise you need to address it by using margins.

Trying to use it as simple as:

const MyDocument = () => {
  return (
    <div>
      <PageTop>
        <span>Top</span>
      </PageTop>
      <div>Content</div>
      <PageBottom>
        <div className="text-gray-400 text-sm">Bottom</div>
      </PageBottom>
      <PageBreak />
      <span>New page</span>
    </div>
  )
}

const App = () => {
  return <MyDocument />
}

And getting:

@onedoc_react-print.js?v=61065e32:17695 Uncaught (in promise) TypeError: os.platform is not a function
   at node_modules/fast-glob/out/utils/path.js (@onedoc_react-print.js?v=61065e32:17695:34)
   at __require2 (chunk-WGAPYIUP.js?v=61065e32:19:50)
   at node_modules/fast-glob/out/utils/index.js (@onedoc_react-print.js?v=61065e32:20835:17)
   at __require2 (chunk-WGAPYIUP.js?v=61065e32:19:50)
   at node_modules/fast-glob/out/managers/tasks.js (@onedoc_react-print.js?v=61065e32:20850:18)
   at __require2 (chunk-WGAPYIUP.js?v=61065e32:19:50)
   at node_modules/fast-glob/out/index.js (@onedoc_react-print.js?v=61065e32:22736:23)
   at __require2 (chunk-WGAPYIUP.js?v=61065e32:19:50)
   at node_modules/tailwindcss/lib/lib/content.js (@onedoc_react-print.js?v=61065e32:22979:46)
   at __require2 (chunk-WGAPYIUP.js?v=61065e32:19:50)
   
   Version: 0.1.108
   macOS: 14.3.1

As of now, Tailwind can only be used with react-print-pdf in a Node environment as Tailwind relies on the file structure. This has caused issues when bundled alongside the other components.

We want to port Tailwind to client-side.

I wanted to add a google font to my template . Hence I tried to follow the docs :

But on running , I get the error "'CSS' is not exported from '@onedoc/react-print' (imported as 'CSS')."

Another way as mentioned in the docs: using the import url in a css file and then using it is not working either.

It would be great if this issue could be fixed.