PDF JS Uncaught Error: Module name "../build/pdf.js" has not been loaded yet for context: _. Use require([]) error

[rajanandini1999]

I have done npm install pdfjs-dist and have imported pdfjsLib, pdfjsViewer in my react application by using

import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker';
import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

When I am doing this I am getting the following error:

Uncaught Error: Module name "../build/pdf.js" has not been loaded yet for context: _. Use require([]) https://requirejs.org/docs/errors.html#notloaded at makeError (require.js:168:17) at Object.localRequire [as require] (require.js:1436:44) at requirejs (require.js:1797:24) at Object.defineProperty.value (pdf_viewer.js:1170:14) at w_pdfjs_require (pdf_viewer.js:7506:41) at Array.pdfjsLib (pdf_viewer.js:1028:17) at w_pdfjs_require (pdf_viewer.js:7506:41) at pdf_viewer.js:7657:33 at pdf_viewer.js:7697:3 at pdf_viewer.js:7700:12

How can I resolve this error? Please help

[YuDorosh]

Hi there,

This error is occurring because PDF.js requires a CommonJS environment and is not compatible with ES6 imports. To resolve this issue, you can try the following:

Use the CommonJS import statement:

const pdfjsLib = require('pdfjs-dist/build/pdf'); const pdfjsWorker = require('pdfjs-dist/build/pdf.worker'); const pdfjsViewer = require('pdfjs-dist/web/pdf_viewer');

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

Use a bundler like Webpack to bundle your dependencies: In your Webpack configuration file, you can specify the workerSrc option as follows:

module.exports = { ... resolve: { alias: { 'pdfjs-dist': path.resolve(__dirname, 'node_modules/pdfjs-dist/build/pdf.js'), 'pdfjs-dist/build/pdf.worker.entry': path.resolve(__dirname, 'node_modules/pdfjs-dist/build/pdf.worker.entry.js') } }, ... module: { rules: [ ... { test: /pdf.worker(.entry)?.js$/, use: [ { loader: 'worker-loader', options: { name: 'pdf.worker.js', inline: true } } ] } ] } };

Then, you can import your dependencies as follows:

import pdfjsLib from 'pdfjs-dist'; import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'; import pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

[rkusa]

Wrong repo, I think you are looking for https://github.com/mozilla/pdf.js

[rajanandini1999]

Hi there,

This error is occurring because PDF.js requires a CommonJS environment and is not compatible with ES6 imports. To resolve this issue, you can try the following:

Use the CommonJS import statement:

const pdfjsLib = require('pdfjs-dist/build/pdf'); const pdfjsWorker = require('pdfjs-dist/build/pdf.worker'); const pdfjsViewer = require('pdfjs-dist/web/pdf_viewer');

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

Use a bundler like Webpack to bundle your dependencies: In your Webpack configuration file, you can specify the workerSrc option as follows:

module.exports = { ... resolve: { alias: { 'pdfjs-dist': path.resolve(__dirname, 'node_modules/pdfjs-dist/build/pdf.js'), 'pdfjs-dist/build/pdf.worker.entry': path.resolve(__dirname, 'node_modules/pdfjs-dist/build/pdf.worker.entry.js') } }, ... module: { rules: [ ... { test: /pdf.worker(.entry)?.js$/, use: [ { loader: 'worker-loader', options: { name: 'pdf.worker.js', inline: true } } ] } ] } };

Then, you can import your dependencies as follows:

import pdfjsLib from 'pdfjs-dist'; import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'; import pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

Okay, thank you