ansu5555
babel-loader You may need an additional loader to handle the result of these loaders.
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.
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
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.
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
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.
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.
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.
