Reactjs with @react-pdf build fails: ./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js

Question

There has been no change in code. The app completed the build successfully yesterday. but today it fails to build

Seems to be some issue with react-pdf dependencies.

./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 10116:106 Module parse failed: Unexpected token (10116:106) 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. | */ |

function gen_bitlen(s, desc) /* deflate_state s;/ /* tree_desc desc; / the tree descriptor //{ | var tree = desc.dyn_tree; | var max_code = desc.max_code;

Node Version: v14.16.0 NPM version: 6.14.11

My package.json details are as follows:

{
  "name": "command-center",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/icons": "^1.0.11",
    "@chakra-ui/react": "^1.4.1",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@react-pdf/renderer": "2.1.1",
    "@react-pdf/font": "2.2.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "chart.js": "^3.3.0",
    "compressorjs": "^1.0.7",
    "exceljs": "^4.2.1",
    "file-saver": "^2.0.5",
    "framer-motion": "^4.1.11",
    "html-to-image": "^1.6.2",
    "html2canvas": "^1.0.0-rc.7",
    "jspdf": "^2.3.1",
    "query-string": "^7.0.0",
    "react": "^17.0.2",
    "react-chartjs-2": "^3.0.3",
    "react-datepicker": "^3.8.0",
    "react-dom": "^17.0.2",
    "react-google-charts": "^3.0.15",
    "react-icons": "^4.2.0",
    "react-icons-kit": "^2.0.0",
    "react-modern-calendar-datepicker": "^3.1.6",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-to-print": "^2.12.6",
    "web-vitals": "^1.0.1",
    "xlsx": "^0.16.9"
  },
  "resolutions": {
    "@react-pdf/font": "2.2.0"
  },
  "scripts": {
    "start": "set PORT=3143 && 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"
    ]
  }
}

Requesting some help on this.

Tried changing the version of react-pdf npm. but it does not help.

can you try @react-pdf/renderer with 3.0.0 and @react/font with 2.3.0? — Pallamolla Sai, Nov 05 '22 at 12:38
also can you please run the following commands and check once? "rm -rf node_modules && rm -f package-lock.json" -- "npm cache clean --force" — Pallamolla Sai, Nov 05 '22 at 12:39

score 0 · Answer 1 · answered Nov 06 '22 at 03:36

can you downgrade the react-scripts version to 4.0.1 from 4.0.3. If that doesn't work can you also check it by downgrading the babel version to 7.19.x.

Lot of others posted the similar issues.

Module parse failed: Unexpected token (257:106) You may need an appropriate loader to handle this file type (Please check the comments as well that might the reason)

React App: "Module parse failed: Unexpected token"

https://github.com/facebook/create-react-app/issues/10518

Reactjs with @react-pdf build fails: ./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js

1 Answers1