You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file #13200

sairamsunkara673M · 2021-04-08T07:46:56Z

ERROR  Failed to compile with 2 errors                                                                  12:58:23

 error  in ./node_modules/pdfjs-dist/build/pdf.js

Module parse failed: Unexpected token (2413:45)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         intent: renderingIntent,
|         renderInteractiveForms: renderInteractiveForms === true,
>         annotationStorage: annotationStorage?.getAll() || null
|       });
|     }

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/sign/esign/AcEsign.vue?vue&type=script&lang=js& 122:0-41 493:6-17
 @ ./src/views/sign/esign/AcEsign.vue?vue&type=script&lang=js&
 @ ./src/views/sign/esign/AcEsign.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/sign/Home.vue?vue&type=script&lang=js&
 @ ./src/views/sign/Home.vue?vue&type=script&lang=js&
 @ ./src/views/sign/Home.vue
 @ ./src/router/index.js
 @ ./src/js/core/init.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.43.252:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/pdfjs-dist/web/pdf_viewer.js

Module parse failed: Unexpected token (895:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     this._on(eventName, listener, {
|       external: true,
>       once: options?.once
|     });
|   }

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/sign/esign/AcEsignViewer.vue?vue&type=script&lang=js& 23:0-64 97:28-36 110:30-39
 @ ./src/views/sign/esign/AcEsignViewer.vue?vue&type=script&lang=js&
 @ ./src/views/sign/esign/AcEsignViewer.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/sign/esign/AcEsign.vue?vue&type=script&lang=js&
 @ ./src/views/sign/esign/AcEsign.vue?vue&type=script&lang=js&
 @ ./src/views/sign/esign/AcEsign.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/sign/Home.vue?vue&type=script&lang=js&
 @ ./src/views/sign/Home.vue?vue&type=script&lang=js&
 @ ./src/views/sign/Home.vue
 @ ./src/router/index.js
 @ ./src/js/core/init.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.43.252:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js



How can we resolve this issue??

The text was updated successfully, but these errors were encountered:

sairamsunkara673M · 2021-04-08T07:51:52Z

Node version "12.16"
pdfjs-dist version "^2.7.570"
Vue Version "^2.6.11",
OS - Ubuntu - Version 18

Snuffleupagus · 2021-04-08T09:09:55Z

Vue Version "^2.6.11",

Unfortunately "Vue", whatever that is, isn't something that the PDF.js contributors can support.
Furthermore, there's not really any actionable information provided as-is; please note https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md (emphasis mine):

If you are developing a custom solution, first check the examples at https://github.com/mozilla/pdf.js#learning and search existing issues. If this does not help, please prepare a short well-documented example that demonstrates the problem and make it accessible online on your website, JS Bin, GitHub, etc. before opening a new issue or contacting us in the Matrix room -- keep in mind that just code snippets won't help us troubleshoot the problem.

error in ./node_modules/pdfjs-dist/build/pdf.js

You probably need to use the correct type of build then, as explained at https://www.npmjs.com/package/pdfjs-dist/v/2.7.570?activeTab=readme

For usage with older browsers or environments, without support for modern features such as e.g. async/await, ReadableStream, optional chaining, and nullish coalescing; please see the es5 folder.

laazaz · 2021-04-08T22:34:54Z

Same problem in React, after upgrading pdfjs-dist to 2.7.570

hanqizheng · 2021-04-09T06:08:01Z

Same problem in React

"pdfjs-dist": "^2.2.228"
"react": "^16.8.6",
node: v14.16.1
npm: 6.14.12

Snuffleupagus · 2021-04-09T07:39:45Z

Same problem in React, after upgrading pdfjs-dist to 2.7.570

The answer has already been provided in #13200 (comment), so unless you explain what's unclear about it we cannot help!

Same problem in React
"pdfjs-dist": "^2.2.228"

That version is no longer supported, please find the supported versions at e.g. https://mozilla.github.io/pdf.js/getting_started/#download

hanqizheng · 2021-04-09T09:19:36Z

I locked the version to 2.2.228 instead of "^2.2.228" then this error didn't show any more.

Kind of weird solution but it's effective.

I'll find a new version to update current version, thank you answerd this question so quickly. 😁

Snuffleupagus · 2021-04-09T09:30:54Z

I locked the version to 2.2.228 instead of "^2.2.228" then this error didn't show any more.

As clearly mentioned #13200 (comment), that version is explicitly unsupported.
Please update to a supported release, and simply follow the already provided information which tells you to import from node_modules/pdfjs-dist/es5/build/pdf.js instead.

MaxGeldner · 2021-04-09T12:26:52Z

The issue is, that in some version after 2.5 some lines with the optional chaining operator were added. This operator is not supported by webpack by default in its current version (as far as I know). Vue uses webpack (@sairamsunkara673M is using Vue and therefore webpack). So you may need an addiotional loader for the pdfjs-dist files. You could configure your webpack as follows:

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules(?!(\/|\\)pdfjs-dist)/,
                loader: 'babel-loader',
                options: {
                    'presets': ['@babel/preset-env'],
                    'plugins': ['@babel/plugin-proposal-optional-chaining']
                }
            }
        ],
    },

This will use the babel plugin-proposal-optional-chaining plugin to compile files with optional chaining operators. Note that you need to have babel installed, in my project I have following babel packages:

"@babel/core": "^7.13.15",
"@babel/preset-env": "^7.13.15",
"babel-loader": "^8.2.2",

Also this will probably extend your build time by a bit, since you need to parse the pdfjs-dist files with an additional loader.
@hanqizheng solution works, because their included version doesn't seem to use the optional chaining operator.

Some other suggestions?
This workaround is not neccessary anymore when webpack adds optional chaining operator support.

Edit:
I additionally needed to add babel-polyfill to my entrypoint in webpack as:

entry: {
        main: ['babel-polyfill', path.join(rootPath, '/src/app/main.js')],
}

timvandermeij · 2021-04-09T18:47:10Z

If you import the ES5 version as indicated above there should be no optional chaining operators since those are not an ES5 feature. Moreover, we use Webpack 5 and that in turn uses Acorn 8 with according to webpack/webpack#10227 even supports optional chaining, so also here I don't see why this should not work. Just make sure you're using the latest PDF.js release since older ones may have been built with Webpack 4.

elimence · 2021-07-07T16:10:55Z

I locked the version to 2.2.228 instead of "^2.2.228" then this error didn't show any more.

As clearly mentioned #13200 (comment), that version is explicitly unsupported.
Please update to a supported release, and simply follow the already provided information which tells you to import from node_modules/pdfjs-dist/es5/build/pdf.js instead.

I'm using react and I'm having this same problem with all the versions I have tried so far except for 2.2.228
There's no es5 directory though

davidbstein · 2021-09-27T06:53:32Z

Since this is the first search result for the error message and the solution isn't in the thread...

Symptom: The following error message shows up when you build.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Cause: your build configuration does not support option chaining. Likely something with webpack or babel.

Solution 1: the quick fix is to use the legacy build folder.

// If this causes an error:
import * as PDFJSViewer from "pdfjs-dist/web/pdf_viewer";
import {getDocument } from "pdfjs-dist/build/pdf.js";

// use this instead:
import * as PDFJSViewer from "pdfjs-dist/legacy/web/pdf_viewer";
import {getDocument } from "pdfjs-dist/legacy/build/pdf.js";

Solution 2: Change your webpack configuration to support option chaining by installing @babel/preset-env or following the instructions in the comments earlier in this thread.

irskep · 2021-09-30T23:06:28Z

@davidbstein's Solution 1 worked great for me as a Parcel user. Too bad these different versions aren't documented in any examples or the Webpack instructions.

blacelle · 2021-10-23T18:35:08Z

With vue-cli, it may be a bit more difficult to configure webpack. We succeeded by adding:

In vue.config.js (https://cli.vuejs.org/core-plugins/babel.html):

transpileDependencies: [
    'pdfjs-dist'
  ]

in babel.config.js:

module.exports = {
  presets: ['@vue/app', '@babel/preset-env'],
  plugins: ["@babel/plugin-proposal-optional-chaining"],
};

czyzby · 2021-12-04T14:19:46Z

The transpileDependencies didn't fully work for me. While I eventually managed to render a page, getTextContent returned no items without any errors. Switching to the legacy build fixed the issue.

qiubinyang · 2022-01-26T16:00:15Z

The transpileDependencies didn't fully work for me. While I eventually managed to render a page, getTextContent returned no items without any errors. Switching to the legacy build fixed the issue.

I meet the same problem. Donnot use cnpm or yarn. Try to delete node_modules/ and run npm install again.

akume · 2022-02-09T17:05:03Z

the same is the case for the core version. if you do not want to go through the hassle of upgrading webpack to include optional chaining, point to the legacy version which is included with the dist. the documentation omits that this exists

import * as pdfjs from 'pdfjs-dist/legacy/build/pdf.js'
instead of
import * as pdfjs from 'pdfjs-dist'

kendesha · 2022-09-22T19:49:56Z

This here helped me resolve the issue
stackoverflow

evanjmg · 2023-01-04T12:25:28Z

Why not just revert the offending code? This issue is not resolved. These are all workarounds

davidfunk13 · 2023-02-15T23:10:48Z

Agreed. I am using this for work, and there is not really adequate documentation. Some explicit fixes for React projects would be appreciated.

Laulesage · 2023-05-04T08:42:52Z

For some reason, pdf js through CDN using const pdfjsLib = window['pdfjs-dist/build/pdf'] , pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'

worked without issue for a year, but about a month ago its starting to be a coinflip to work in Chrome...
It is working stable in Firefox, but other things are not working then ....

Trying to import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.js' or even import * as pdfjs from 'pdfjs-dist' gives me the same error as above .....

Im about to hang myself ngl...

Snuffleupagus mentioned this issue Apr 8, 2021

Getting error using with Angular #13199

Closed

timvandermeij closed this as completed Apr 9, 2021

Snuffleupagus mentioned this issue Apr 20, 2021

Module parse failed: Unexpected token (2413:45) #13273

Closed

mozilla deleted a comment from PLQin Jul 14, 2021

DavidBerger98 mentioned this issue Nov 9, 2021

Issue with webpack(?) - "hot update was not successful" OHIF/Viewers#2608

Closed

prafulrajhm mentioned this issue Nov 22, 2021

[BUG] pdfjs-dist loader issue [Update version] ansu5555/pdf-viewer-reactjs#87

Open

yermolim mentioned this issue Aug 13, 2022

vue3-ts项目报错 yermolim/ts-pdf#3

Closed

pzoomin mentioned this issue Oct 10, 2022

React-pdf >= v5.3 throws canvas.node error wojtekmaj/react-pdf#1064

Closed

4 tasks

necik11 mentioned this issue Apr 14, 2023

SPFx 1.17.1 - pdf.js SharePoint/sp-dev-docs#8896

Closed

9 tasks

philmcmahon mentioned this issue May 2, 2023

Upgrade react-scripts, pdfjs-dist, elastic-ui guardian/giant#106

Merged

necik11 mentioned this issue Apr 5, 2024

How to export bundle.js from a projectA [webpack5] to a projectB [webpack4] #17894

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file #13200

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file #13200

sairamsunkara673M commented Apr 8, 2021

sairamsunkara673M commented Apr 8, 2021 •

edited

Loading

Snuffleupagus commented Apr 8, 2021

laazaz commented Apr 8, 2021

hanqizheng commented Apr 9, 2021

Snuffleupagus commented Apr 9, 2021

hanqizheng commented Apr 9, 2021 •

edited

Loading

Snuffleupagus commented Apr 9, 2021

MaxGeldner commented Apr 9, 2021 •

edited

Loading

timvandermeij commented Apr 9, 2021

elimence commented Jul 7, 2021

davidbstein commented Sep 27, 2021

irskep commented Sep 30, 2021

blacelle commented Oct 23, 2021 •

edited

Loading

czyzby commented Dec 4, 2021

qiubinyang commented Jan 26, 2022

akume commented Feb 9, 2022 •

edited

Loading

kendesha commented Sep 22, 2022 •

edited

Loading

evanjmg commented Jan 4, 2023 •

edited

Loading

davidfunk13 commented Feb 15, 2023

Laulesage commented May 4, 2023

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file #13200

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file #13200

Comments

sairamsunkara673M commented Apr 8, 2021

sairamsunkara673M commented Apr 8, 2021 • edited Loading

Snuffleupagus commented Apr 8, 2021

laazaz commented Apr 8, 2021

hanqizheng commented Apr 9, 2021

Snuffleupagus commented Apr 9, 2021

hanqizheng commented Apr 9, 2021 • edited Loading

Snuffleupagus commented Apr 9, 2021

MaxGeldner commented Apr 9, 2021 • edited Loading

timvandermeij commented Apr 9, 2021

elimence commented Jul 7, 2021

davidbstein commented Sep 27, 2021

irskep commented Sep 30, 2021

blacelle commented Oct 23, 2021 • edited Loading

czyzby commented Dec 4, 2021

qiubinyang commented Jan 26, 2022

akume commented Feb 9, 2022 • edited Loading

kendesha commented Sep 22, 2022 • edited Loading

evanjmg commented Jan 4, 2023 • edited Loading

davidfunk13 commented Feb 15, 2023

Laulesage commented May 4, 2023

sairamsunkara673M commented Apr 8, 2021 •

edited

Loading

hanqizheng commented Apr 9, 2021 •

edited

Loading

MaxGeldner commented Apr 9, 2021 •

edited

Loading

blacelle commented Oct 23, 2021 •

edited

Loading

akume commented Feb 9, 2022 •

edited

Loading

kendesha commented Sep 22, 2022 •

edited

Loading

evanjmg commented Jan 4, 2023 •

edited

Loading