ESM contains server code, doesn't provide named exports

[thekevinbrown]

Describe the bug
When using Vite to package a React app, we hit some issues because:

1. The ESM that @react-pdf/renderer provides doesn't seem to provide the same exports as the CJS module.
2. There is server code included in the ESM, but this library is a browser module.

To Reproduce
You can reproduce with this repository: https://github.com/thekevinbrown/vite-react-pdf-reproduction

Expected behavior
I expected React PDF to be able to be bundled and used in an ESM context.

Screenshots

Uncaught ReferenceError: global is not defined
    at node_modules/blob/index.js (@react-pdf_renderer.js:554)
    at __require (chunk-KVFJW2XH.js:12)
    at node_modules/blob-stream/index.js (@react-pdf_renderer.js:616)
    at __require (chunk-KVFJW2XH.js:12)
    at @react-pdf_renderer.js:126368

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• React-pdf version: "@react-pdf/renderer": "^2.0.12",

Additional Notes

An issue was logged with Vite here: vitejs/vite#3405

This may be related to this issue as well: #1029

I'd be happy to help with a PR if one is welcome, just wanted to check to ensure I wasn't duplicating effort and that this was something you'd accept a PR for.

[thekevinbrown]

I'm trying to even get a local development version running in an example app and I'm not sure where to start. The examples folder has no start script.

Does anyone know how to test changes with this library? There's no CONTRIBUTING.md file either, so I'm not really sure where to start.

[jeetiss]

@thekevinbrown there is CONTRIBUTING.md

[thekevinbrown]

Ah, I didn't look in the .github folder.

Anyway, it doesn't say how to build and run the code locally, so I'm still pretty stuck. I've added Rollup to 4 of the packages in the monorepo and still can't get it to fully run in a Vite environment.

I'm thinking I'll give up and just shim @react-pdf/renderer at this point.

[diegomura]

Hey @thekevinbrown ! Sorry for the delay and lack of documentation on how to contribute to this project. It's really hard to catch up with all the activity here and also work haha. I'm writing a quick guide right now on the CONTRIBUTING.md file to how to run a dev environment for this project

[thekevinbrown]

@diegomura, no worries at all, I maintain some open source stuff and the struggle is real! No stress at all. The main thing that's missing IMO is a way to run the examples against the packages already in the repo so we can test changes and be sure they work. When I use a Vite environment to try to test, it breaks currently.

To give you a picture of what I'm up to, here's my WIP commit: https://github.com/TechInSite/react-pdf/tree/fix-node-code Basically I'm trying to achieve two things:

1. Provide ESM for all packages so more modern build environments can use them all easily. The fact that some are ESM and some are CJS confuses ESBuild.
2. Remove the reference to blob-stream as it references blob which has node code that references global in it. I suspect we don't even need it as it's used in one place to load the whole stream into an in memory Blob anyway, so I'm thinking we can just read the stream and pipe to the blob ourselves there.

The error I'm currently getting from Rollup on packages/textkit is:

Error: 'default' is not exported by node_modules/@babel/runtime/helpers/defineProperty.js, imported by src/engines/linebreaker/linkedList.js

That's because I've added Rollup to that package to try to achieve point 1 above. I'm not sure if we still need Babel Runtime in that package, but if we do, not sure how to get it to work with Rollup.

I'll keep poking at it, but I'll also publish my shim so I can unblock the team while we investigate.

[thekevinbrown]

Alrighty, finally found a set of shims and workarounds that make it work, both in Vite Dev and Production builds.

• Aliases need to be created to some browserify shims for node globals.
• Because the load order is different in dev and production, I needed to put quite a few shims in different files. (Actually on disk in node_modules. Yuck.)
• readable-stream which is needed for Node streams in the browser works fine in dev mode, but in a production build it fails because of circular imports which Rollup doesn't handle particularly well, but also probably shouldn't be there in the first place in ESM land (Error with readable-stream rollup/rollup-plugin-commonjs#293, Circular dependencies (prevents proper rollup) nodejs/readable-stream#348). I changed the package to use a Registry pattern so it'd work (https://github.com/techinsite/readable-stream) and published it as vite-compatible-readable-stream.
• Because there are about 7 new dependencies needed, including Vite aliases, and manual patching of files in node_modules I bundled that up into vite-plugin-shim-react-pdf.

So, if you're coming here from Google, you do the following in your Vite project:

$ yarn add --dev vite-plugin-shim-react-pdf

Then in vite.config.js:

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import shimReactPdf from "vite-plugin-shim-react-pdf";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh(), shimReactPdf()],
});

Then you'll also need to use the default import because of the missing exports. E.g.

Instead of:

import { Text, View, StyleSheet } from "@react-pdf/renderer";

You have to do:

import pdf from "@react-pdf/renderer";
const { Text, View, StyleSheet } = pdf;

React PDF also didn't have a development project I could use to test changes, so I made a really rough one out of the examples: https://github.com/TechInSite/react-pdf-development-harness

@diegomura I'd be happy to transfer ownership of the development harness repo to you if you want to have it as part of the React PDF project moving forward. Could use quite a bit of CSS work, but I had enough to get through with the above that I didn't put any time into making it pretty at all.

[endlesstravel]

same issue

[carlobeltrame]

I'm having the same issue as well, and the shim of @thekevinbrown worked wonders, even for my special case of packing the react component into a webcomponent and using it inside a Vue.js app! Thanks a lot for that! Let's hope this can be fixed directly in react-pdf in the future.