babel-loader You may need an additional loader to handle the result of these loaders.

[abitgen]

Getting this error while running in a typescript project, but works fine a react js project.

./node_modules/pdfjs-dist/build/pdf.js 3657:145
Module parse failed: Unexpected token (3657:145)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|               numPages: this._numPages,
|               annotationStorage: (annotationStorage === null || annotationStorage === void 0 ? void 0 : annotationStorage.getAll()) || null,
>               filename: ((_this$_fullReader = this._fullReader) === null || _this$_fullReader === void 0 ? void 0 : _this$_fullReader.filename) ?? null
|             }).finally(() => {
|               if (annotationStorage) {

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

package.json

{
  "name": "react-form",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@hookform/resolvers": "^1.3.5",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.20",
    "@types/lodash": "^4.14.168",
    "@types/node": "^14.14.33",
    "@types/pdf-viewer-reactjs": "2.2.1",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.2",
    "axios": "^0.21.1",
    "axios-cache-adapter": "^2.7.3",
    "bulma": "^0.9.2",
    "bulma-helpers": "^0.4.0",
    "loadash": "^1.0.0",
    "localforage": "^1.9.0",
    "material-icons": "^0.5.4",
    "node-sass": "^5.0.0",
    "notistack": "^1.0.7",
    "pdf-viewer-reactjs": "^2.2.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-dropzone": "^11.3.2",
    "react-helmet-async": "^1.0.9",
    "react-hook-form": "6.15.7",
    "react-number-format": "^4.5.5",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.2.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@types/react-helmet": "^6.1.1",
    "@types/react-html-parser": "^2.0.1",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@types/redux-logger": "^3.0.8",
    "babel-loader": "8.1.0",
    "material-ui": "^0.20.2",
    "react-helmet": "^6.1.0",
    "react-html-parser": "^2.0.2",
    "react-redux": "^7.2.3",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "zod": "^1.11.11"
  }
}

kindly resolve this. Let me know if any additional input is required.

[DivyaD2805]

Hey ! Did u get any solution for this ? I am facing the same issue . Please do inform if u got any solution it would be helpful

[redday059]

I have the same issue. I guess the source of the problem is somewhere earlier than in 2.2.3.
At least in 2.2.2 I can see the same issue. The only reason I had to update the version was a bug with canvas... Now, unfortunately, I can't find any workable version.

[redday059]

More details:

ERROR  Failed to compile with 1 errors                                                                                                                                                1:46:27 AM

 error  in ./node_modules/pdf-viewer-reactjs/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/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js 1:563-584

[redday059]

So, in my case that was related to an outdated webpack version. Update webpack and try it out. Now build is fine. But there is error message instead of pdf. I guess this is another issue.

[abitgen]

@redday059 what command did you use to update webpack?

[ekanath25]

I am also facing the same issue.

[betaSolver05609]

I was implementing an urgent feature in the app, and I came across this package. It was so frustrating and disappointing to face the issue and not find a solution. Its an utter waste of time.

[RafaelArakaki]

Hi. Has anyone managed to solve this problem?

[gopi014]

The below solution works for me
First, install
npm install npm-force-resolutions --save-dev

Then in package.json we need to override the pdfjs-dist version to previous working version like this

"resolutions": {
    "pdfjs-dist": "2.6.347"
  }

and in scripts section add new preinstall entry:

"preinstall": "npx npm-force-resolutions",

now if you do npm install and run your application it should work. Hope it helps

The root cause of the problem is , though in the dependency package.json has version 2.6.347 for pdfjs-dist since ^ was there before the version number during npm install, it installs the most recent version of pdfjs-dist which is causing this problem.

[zabsalahid]

Hello! I'm experiencing this one also. Anyone able to fix it?