Closed thekevinbrown closed 3 years ago
could you try following this comment https://github.com/vitejs/vite/issues/2618#issuecomment-820919951
@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
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 @@
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:
@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.
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-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()],
});
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 yarn add vite-plugin-shim-react-pdf -D
, thanks again!
Thanks @Cslove, you're right. I updated the instructions above to add --dev
to the command
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
blob
NPM library, but what's really strange is the code in.vite/@react-pdf_renderer.js
on 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
global
is 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