-
-
Notifications
You must be signed in to change notification settings - Fork 899
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
Config worker not work when using Vite + React.lazy + react-pdf #1843
Comments
This comment was marked as outdated.
This comment was marked as outdated.
If you are using a nginx in production, the problem came probably from your nginx config, because is not serving the .mjs files. The solution is to update your nginx config to serve them as a javascript files, to do so, this an example: http {
# Includes mapping of file name extensions to MIME types of responses
# and defines the default type.
include /etc/nginx/mime.types;
# maps the js and mjs file extensions to the application/javascript MIME type.
types {
application/javascript js mjs;
}
default_type application/octet-stream;
} |
Thank you, this helped, had to add mjs to all nginx proxies |
**This did not work for me:** pdfjs.GlobalWorkerOptions.workerSrc = new URL(
"pdfjs-dist/build/pdf.worker.min.js",
import.meta.url,
).toString(); I got it to work by placing pdf.worker.min.mjs in the public folder of my web app Added to main.tsx import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs";
I am using projen, so this is my configuration.
In .projenrc.ts, I added:
// Add "prebuild" script settings to package.json
const pdfjs_dist = webapp.addTask("prebuild", {
description: "For React-PDF [wojtekmaj/react-pdf] to work",
exec: `cp ${path.relative(webapp.outdir, path.join(require.resolve("pdfjs-dist"), "..", "pdf.worker.min.mjs"))} public/pdf.worker.min.mjs`,
receiveArgs: true,
});
// automatically run "prebuild" script when web-app:build gets called via "npx nx run web-app:build --skip-nx-cache"
webapp.tasks.tryFind("build")?.prependSpawn(pdfjs_dist);
webapp.gitignore.addPatterns("public/pdf.worker.min.mjs");
// Add settings to .npmrc - enables pnpm pre-post scripts to automatically run via "pnpm build"
project.npmrc.addConfig("enable-pre-post-scripts", "true"); |
Any update ? |
I am facing this issue also, and followed steps but it did not work, and my
Anyone have another idea? |
I edited mime.types file in nginx config ( yours is in replaced js line with this |
I had to configure the worker again in the pdf viewer component in useEffect. |
I updated but it isn't working.
|
Solution
I had the same issue, what solved it for me: is configuring PDF.js worker inside a self-invoked function and importing // src/main.tsx
// Configure PDF.js worker
(async () => {
const { pdfjs } = await import("react-pdf");
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
"pdfjs-dist/build/pdf.worker.min.mjs",
import.meta.url
).toString();
})(); This also works, because I think the issue was not having // src/main.tsx
import { pdfjs } from "react-pdf";
// Configure PDF.js worker
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
"pdfjs-dist/build/pdf.worker.min.mjs",
import.meta.url
).toString();
console.log(pdfjs); |
Before you start - checklist
Description
I face the problem that shows Setting fake worker failed when using Vite + React.lazy (for react-pdf component) + run build mode
This issue only happen when run in npm run build mode, not happen when run in npm run dev mode
Previously I used Webpack and this issue did not happen. It just happen when I migrate to vite
Steps to reproduce
https://github.com/nmaddp1995/react-pdf-vite-lazy-issue
Step1: Config worker in main file
Step2: Import component ReactPDF with Lazy:
Run this repo in production mode (npm run build)
View the app by npm run preview
Compare with run the app by npm run dev build
Production build:
Dev run:
Expected behavior
It should work the same with npm run dev and npm run build mode
Actual behavior
Production build:
Dev run:
Additional information
No response
Environment
The text was updated successfully, but these errors were encountered: