Niputi
commented
3 years ago could you try following this comment https://github.com/vitejs/vite/issues/2618#issuecomment-820919951
Closed thekevinbrown closed 3 years ago
Niputi
commented
3 years ago could you try following this comment https://github.com/vitejs/vite/issues/2618#issuecomment-820919951
thekevinbrown
commented
3 years ago @Niputi when I do that, I then get none of the expected exports from the library, e.g.
Uncaught SyntaxError: The requested module '/node_modules/.vite/@react-pdf_renderer.js?v=ce5c473e' does not provide an export named 'PDFRenderer'or what I'm actually after:
Uncaught SyntaxError: The requested module '/node_modules/.vite/@react-pdf_renderer.js?v=ce5c473e' does not provide an export named 'Document'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
Uncaught SyntaxError: The requested module '/-/restructure@v0.5.4-1x0iZnKm3JkZFlHtuxoO/dist=es2020,mode=imports/unoptimized/src/utils.js' does not provide an export named 'PropertyDescriptor'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
nihalgonsalves
commented
3 years ago Looks like it isn't compatible with Webpack 5 either: https://github.com/diegomura/react-pdf/issues/1029
Another issue, as @Niputi pointed out, seems to be that the export * from '@react-pdf/primitives' does not seem to be preserved in react-pdf's es bundle: https://github.com/diegomura/react-pdf/blob/235dc0a/packages/renderer/src/dom.js#L171
node_modules/@react-pdf/renderer/lib/react-pdf.browser.es.js
Combining the shims from the linked issue, a shim for EventEmitter, and using the default export, I was able to get it to work:
Patch: thekevinbrown:vite-react-pdf-reproduction-391f8ab.patch.txt (use git apply path/to/patch on your reproduction repo).
```diff diff --git a/index.html b/index.html index 38f3861..7e9e3e4 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,16 @@
nihalgonsalves
commented
3 years ago Closing this since it isn't something Vite can fix.
thekevinbrown
commented
3 years ago That is amazing, thank you so much for your help!
thekevinbrown
commented
3 years ago 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:
@rollup/plugin-inject to see if I can get the shims in that way. No dice, Vite starts saying:
8:36:23 PM [vite] Internal server error: ENOENT: no such file or directory, open '[project]/node_modules/.vite/browser-external:util'I cannot figure out why that file isn't there. The util module is in node_modules.
vite-plugin-banner to try to inject stuff. No good, nor should it be, that's gross.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:
Uncaught SyntaxError: The requested module '/node_modules/buffer/index.js?v=08612583' does not provide an export named 'Buffer'It's CJS, so I don't know how to import it there.
thekevinbrown
commented
3 years ago Alrighty, finally found a set of shims and workarounds that make it work, both in Vite Dev and Production builds.
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 (https://github.com/rollup/rollup-plugin-commonjs/issues/293, https://github.com/nodejs/readable-stream/issues/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.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-pdfThen 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()],
});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
Cslove
commented
3 years ago @thekevinbrown thank you so much!! meet same problem. and your vite plugin solved my issue! by the way, it should yarn add vite-plugin-shim-react-pdf -D, thanks again!
thekevinbrown
commented
3 years ago Thanks @Cslove, you're right. I updated the instructions above to add --dev to the command
github-actions[bot]
commented
3 years ago 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:Used package manager: yarn
Logs
Before submitting the issue, please make sure you do the following