Skip to content

Package doesn't work on Node server #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
paule89123 opened this issue Apr 24, 2023 · 4 comments
Closed

Package doesn't work on Node server #57

paule89123 opened this issue Apr 24, 2023 · 4 comments

Comments

@paule89123
Copy link

I'm using @react-pdf/renderer on a backend Node server and trying to render some html in the pdf using react-pdf-html. However I get this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Is it possible to use react-pdf-html on the server?

@gla23
Copy link

gla23 commented May 3, 2023

We worked out that this was caused by a mismatch in the types provided in the package. The .TypeScript warning lead us to do the wrong import which generated the error above.

I think there is an error in your types (the Html.d.ts file provided by npm).

When inspecting node_modules, the Html.d.ts has export default Html; but Html.js has exports.default = Html;.
I think the types are saying that the package provides a ESM default export, where in reality the vanilla JS exports a CommonJS module.

When we used this on the frontend with with Vite it worked fine. I think Vite handles the mismatch; that is, it gives us the ESM default export, rather than the CommonJS module. However, when using Node we have to do the following it to correctly use the Html component:

import pkg from "react-pdf-html";
const Html = (pkg as any).Html

This makes sense given the code snippets above.

Our issue is fixed, but reporting anyway incase others have the same issue, and it may be helpful for fixing the types.

@danomatic
Copy link
Owner

@gla23 thanks for the input. Is there a changed needed for this package to help with this?

@danomatic danomatic closed this as not planned Won't fix, can't repro, duplicate, stale Jan 15, 2024
@coren-frankel
Copy link
Contributor

Thank you @gla23! That solved my issue. I am curious if this can be easily remedied in the package, but I'll admit to being too inexperienced to know what to change.

I think there is an error in your types (the Html.d.ts file provided by npm).

When inspecting node_modules, the Html.d.ts has export default Html; but Html.js has exports.default = Html;. I think the types are saying that the package provides a ESM default export, where in reality the vanilla JS exports a CommonJS module.

Could this be fixed with a missing property in the tsconfig or package.json? I'll be digging into this over the weekend to satisfy my own curiosity.

@coren-frankel
Copy link
Contributor

coren-frankel commented Mar 25, 2024

Reporting back after a weekend of research and an ambitious PR submission!

The package is currently written in CommonJS as is the build output. The types are unchanged by which module build is chosen, but if you're importing react-pdf-html into a TypeScript Node app that is ESM, the compiler will expect ESM (but find CommonJS instead).

By default, CommonJS modules build CommonJS, and so do ES modules. In this way, ESM is backward-compatible with CJS, but CJS cannot compile to ESM. In the interest of getting react-pdf-html "future-ready" and ESM compatible, refactoring the package to ESM has its merits and can be done with relatively minimal changes to the current dependencies and configurations.

@gla23 thanks for the input. Is there a changed needed for this package to help with this?

@danomatic, please see the proposed changes in #81.

While @gla23's workaround solves the import into an ES module Node app, this package could benefit from being rewritten as an ES module to increase its flexibility. In the interest of getting react-pdf-html "future-ready" and ESM compatible, refactoring the package to ESM has its merits.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants