Skip to content
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

Open
4 tasks done
nmaddp1995 opened this issue Jul 15, 2024 · 10 comments
Open
4 tasks done

Config worker not work when using Vite + React.lazy + react-pdf #1843

nmaddp1995 opened this issue Jul 15, 2024 · 10 comments
Labels
bug Something isn't working

Comments

@nmaddp1995
Copy link

nmaddp1995 commented Jul 15, 2024

Before you start - checklist

  • I followed instructions in documentation written for my React-PDF version
  • I have checked if this bug is not already reported
  • I have checked if an issue is not listed in Known issues
  • If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I face the problem that shows Setting fake worker failed when using Vite + React.lazy (for react-pdf component) + run build mode
image

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:
image

image

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:
image

Dev run:
image

Expected behavior

It should work the same with npm run dev and npm run build mode

Actual behavior

Production build:
image

Dev run:
image

Additional information

No response

Environment

  • Browser (if applicable): Chrome
  • React-PDF version:^9.1.0
  • React version: ^18.3.1
  • Bundler name and version (if applicable):
@nmaddp1995 nmaddp1995 added the bug Something isn't working label Jul 15, 2024
@lotfiGipsyKing

This comment was marked as outdated.

@lotfiGipsyKing
Copy link

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;
}

@ernst77
Copy link

ernst77 commented Aug 6, 2024

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

@moyarich
Copy link

**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");

@yaswanthmaddula-sureify
Copy link

Any update ?

@tiennguyen1293
Copy link

I am facing this issue also, and followed steps but it did not work, and my nginx.conf file:

http {
	include /etc/nginx/mime.types;

        types {
          application/javascript js mjs;
        }
      
        default_type application/octet-stream;
        
        server {
              gzip on;
              gzip_disable "msie6";
              gzip_vary on;
              gzip_proxied any;
              gzip_comp_level 6;
              gzip_buffers 16 8k;
              gzip_min_length 256;
              gzip_types
                text/plain
                text/css
                text/js
                text/xml
                text/javascript
                application/javascript
                application/x-javascript
                application/json
                application/xml
                application/rss+xml
                image/svg+xml;
           ...
        }
}

Anyone have another idea?

@ernst77
Copy link

ernst77 commented Oct 25, 2024

I am facing this issue also, and followed steps but it did not work, and my nginx.conf file:

http {
	include /etc/nginx/mime.types;

        types {
          application/javascript js mjs;
        }
      
        default_type application/octet-stream;
        
        server {
              gzip on;
              gzip_disable "msie6";
              gzip_vary on;
              gzip_proxied any;
              gzip_comp_level 6;
              gzip_buffers 16 8k;
              gzip_min_length 256;
              gzip_types
                text/plain
                text/css
                text/js
                text/xml
                text/javascript
                application/javascript
                application/x-javascript
                application/json
                application/xml
                application/rss+xml
                image/svg+xml;
           ...
        }
}

Anyone have another idea?

I edited mime.types file in nginx config ( yours is in /etc/nginx/mime.types;)

replaced js line with this
application/javascript js mjs;

@yaswanthmaddula-sureify

I had to configure the worker again in the pdf viewer component in useEffect.

@tiennguyen1293
Copy link

tiennguyen1293 commented Oct 29, 2024

I am facing this issue also, and followed steps but it did not work, and my nginx.conf file:

http {
	include /etc/nginx/mime.types;

        types {
          application/javascript js mjs;
        }
      
        default_type application/octet-stream;
        
        server {
              gzip on;
              gzip_disable "msie6";
              gzip_vary on;
              gzip_proxied any;
              gzip_comp_level 6;
              gzip_buffers 16 8k;
              gzip_min_length 256;
              gzip_types
                text/plain
                text/css
                text/js
                text/xml
                text/javascript
                application/javascript
                application/x-javascript
                application/json
                application/xml
                application/rss+xml
                image/svg+xml;
           ...
        }
}

Anyone have another idea?

I edited mime.types file in nginx config ( yours is in /etc/nginx/mime.types;)

replaced js line with this application/javascript js mjs;

I updated but it isn't working.

pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'
http {
	include mime.types;

        types {
          application/javascript js mjs;
        }
      
        default_type application/octet-stream;
        
        server {
              gzip on;
              gzip_disable "msie6";
              gzip_vary on;
              gzip_proxied any;
              gzip_comp_level 6;
              gzip_buffers 16 8k;
              gzip_min_length 256;
              gzip_types
                text/plain
                text/css
                text/xml
                text/javascript
                application/javascript
                application/x-javascript
                application/json
                application/xml
                application/rss+xml
                image/svg+xml;
           ...
        }
}

image

@abdel7ak96
Copy link

abdel7ak96 commented Oct 30, 2024

Solution

Using: Vite + React.lazy

I had the same issue, what solved it for me: is configuring PDF.js worker inside a self-invoked function and importing pdfjs in there:

// 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 pdfjs used anywhere and consequently not loaded.

// 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);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants