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

[nmaddp1995]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-PDF version
• [X] I have checked if this bug is not already reported
• [X] I have checked if an issue is not listed in Known issues
• [X] 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]

Hello i managed to fix this issue, by adding a custom vite plugin to copy the pdf-worker in the dist folder:

vite.config.ts

// custom plugin to copy pdf worker
const copyPdfWorkerPlugin = (): Plugin => ({
  name: 'copy-pdf-worker',
  apply: 'build',
  configResolved(config) {
    const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
    const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.mjs');
    fs.cpSync(pdfWorkerPath, './dist/pdf.worker.mjs', { recursive: true });
  },
});

// then add it to your plugins list
export default defineConfig({
  plugins: [copyPdfWorkerPlugin()],
}

[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