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

661 Views Asked by At

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.

1

There are 1 best solutions below

0
On

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