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

[nmaddp1995]

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

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

• Browser (if applicable): Chrome
• React-PDF version:^9.1.0
• React version: ^18.3.1
• Bundler name and version (if applicable):

[lotfiGipsyKing]

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]

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]

**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]

Any update ?

[tiennguyen1293]

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]

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]

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

[abdel7ak96]

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