react-pdf is not compatible without shims #3405
Comments
|
could you try following this comment #2618 (comment) |
|
@Niputi when I do that, I then get none of the expected exports from the library, e.g. or what I'm actually after: |
|
It looks like the file 'react-pdf.browser.es.js' does not provide a export for 'Document'. I tried using the plugin-cdn by following this guide with the following config cdn('skypack', {
'@react-pdf/renderer': '^2.0.12'
})by doing this I got this error message It seems like esm version of @react-pdf_renderer is broken by including node specific code and not including all necessary exports. you should make a bug report the library |
|
Looks like it isn't compatible with Webpack 5 either: diegomura/react-pdf#1029 Another issue, as @Niputi pointed out, seems to be that the
Combining the shims from the linked issue, a shim for EventEmitter, and using the default export, I was able to get it to work:
|
nihalgonsalves
changed the title
|
Closing this since it isn't something Vite can fix. |
|
That is amazing, thank you so much for your help! |
|
Ok, I'm incredibly stuck. This workaround works fine in dev but not in production. This is because the script in index.html gets pulled into the index bundle, but the shims are required for vendor. Vendor is preloaded, so it loads before the shims. Here's what I've tried:
I cannot figure out why that file isn't there. The util module is in node_modules.
Does anyone know how I can get these shims injected at the top of the vendor bundle, referencing the correct browserify packages? Edit: I also tried: export default function inject() {
return {
name: "inject-react-pdf-shims",
enforce: "pre",
transform(code, id) {
if (/@react-pdf_renderer/.test(id)) {
return {
code: `
import process from "process";
import { Buffer } from "buffer";
import EventEmitter from "events";
window.global = window;
window.Buffer = Buffer;
window.process = process;
window.EventEmitter = EventEmitter;
${code}
`,
};
}
},
};
}but no dice either: It's CJS, so I don't know how to import it there. |
|
Alrighty, finally found a set of shims and workarounds that make it work, both in Vite Dev and Production builds.
So, if you're coming here from Google, you do the following in your Vite project: $ yarn add --dev vite-plugin-shim-react-pdfThen in 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()],
});The 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 you could use to test changes, so I made a really rough one out of the examples: https://github.com/TechInSite/react-pdf-development-harness |
|
@thekevinbrown thank you so much!! meet same problem. and your vite plugin solved my issue! by the way, it should |
|
Thanks @Cslove, you're right. I updated the instructions above to add |
|
This issue has been locked since it has been closed for more than 14 days. If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion. |
Describe the bug
When trying to use React PDF in a Vite React project, we get:
It's from the
blobNPM library, but what's really strange is the code in.vite/@react-pdf_renderer.json line 554 is:But the module definitely does not get packaged with references to
global: https://unpkg.com/blob@0.1.0/main.jsWe'd like to understand where the
globalis coming from, then be able to fix and/or work around this so that we can use React PDF in our project.Also noteworthy is that when we try to use
Document,Page, or other exports that the TypeScript types say should be there, we get:It really makes me wonder if we're somehow selecting a server version of React PDF, but I can't see how or where that's happening in the monorepo imports that are going on.
Reproduction
https://github.com/thekevinbrown/vite-react-pdf-reproduction
System Info
Output of
npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:System: OS: macOS 11.2.3 CPU: (8) arm64 Apple M1 Memory: 541.69 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 15.11.0 - ~/.nvm/versions/node/v15.11.0/bin/node Yarn: 1.22.5 - ~/.yarn/bin/yarn npm: 7.6.0 - ~/.nvm/versions/node/v15.11.0/bin/npm Browsers: Brave Browser: 90.1.23.75 Chrome: 90.0.4430.212 Firefox: 88.0 Safari: 14.0.3 npmPackages: vite: ^2.3.0 => 2.3.2Used package manager: yarn
Logs
Before submitting the issue, please make sure you do the following
The text was updated successfully, but these errors were encountered: