Module parse failed: Unexpected token (257:106) You may need an appropriate loader to handle this file type

Question

After running 'npm update' on my app, I am suddenly getting the following error:

Compiled with problems:

ERROR in ./node_modules/pako/lib/zlib/trees.js 257:106

Module parse failed: Unexpected token (257: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.
|  *     not null.
|  */
> 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;

Strange. So I compared it to the same app running on a different workstation with the same code, but where I did not run 'npm update'. The app works, no surprise.

I've seen other posts with this error, but their solutions do not seem to apply to my environment.

I cannot figure out why it's not working on my main workstation. If I copy over node_modules from the working station, the app starts fine. But as soon as I remove node_modules and package-lock.json and reinstall, the app will not start. I've removed node_modules/package-lock.json/clear npm cache. Doesn't help.

I'm comparing the module versions via 'npm ls', and they are identical on both workstations.

Both are running NodeJS 8.12.0 and npm 8.19.2

I looked at the file that it's erroring out on (pako/lib/zlib/trees.js), and it's identical on both systems.

I have no idea what 'pako' is, but using 'npm explain pako' it appears to have something to do with pdf-lib, which was never updated.

My app was built with create-react-app.

I'm at a complete loss. Here is my package.json:

{
  "name": "foo",
  "version": "0.1.0",
  "description": "Foo",
  "contributors": [],
  "license": "UNLICENSED",
  "private": true,
  "dependencies": {
    "@coreui/chartjs": "^2.0.0",
    "@coreui/coreui-pro": "^3.4.2",
    "@coreui/icons": "^2.1.0",
    "@coreui/icons-pro": "^2.0.3",
    "@coreui/icons-react": "^1.1.0",
    "@coreui/react": "^3.4.6",
    "@coreui/react-chartjs": "^1.1.0",
    "@coreui/utils": "^1.3.1",
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@nadavshaar/react-grid-table": "^1.0.0",
    "@pdf-lib/fontkit": "^1.1.1",
    "@react-firebase/auth": "^0.2.10",
    "ag-grid-community": "^25.3.0",
    "ag-grid-react": "^25.3.0",
    "arithmetic": "^1.0.1",
    "bootstrap": "^5.2.0",
    "classnames": "^2.3.1",
    "codemirror": "^5.63.3",
    "core-js": "^3.19.1",
    "downloadjs": "^1.4.7",
    "firebase": "^9.12.1",
    "firebase-admin": "^11.0.1",
    "firebaseui": "^6.0.1",
    "formik": "^2.2.9",
    "mobx": "^6.3.3",
    "mobx-react": "^7.1.0",
    "pdf-lib": "^1.17.1",
    "prop-types": "^15.7.2",
    "random-id": "^1.0.4",
    "react": "^17.0.2",
    "react-app-polyfill": "^2.0.0",
    "react-awesome-button": "^6.5.1",
    "react-big-calendar": "^0.33.6",
    "react-bootstrap": "^2.4.0",
    "react-collapsible": "^2.10.0",
    "react-cookie-consent": "^8.0.1",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^5.0.3",
    "react-firebaseui": "^6.0.0",
    "react-grid-layout": "^1.3.0",
    "react-range": "^1.8.12",
    "react-redux": "7.2.4",
    "react-router-dom": "^5.3.0",
    "react-select": "^4.3.1",
    "react-text-mask-hoc": "^0.11.0",
    "react-toastify": "^9.0.8",
    "reactstrap": "^8.10.0",
    "redux": "4.1.0",
    "rpg-dice-roller": "1.6.0",
    "sass": "^1.55.0",
    "sillyname": "^0.1.0",
    "spinkit": "2.0.1",
    "string-math": "^1.2.2",
    "styled-components": "^5.3.3",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "mutationobserver-shim": "^0.3.7",
    "react-scripts": "^5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "test:cov": "npm test -- --coverage --watchAll=false",
    "test:debug": "react-scripts --inspect-brk test --runInBand",
    "eject": "react-scripts eject",
    "zip": "git archive -o coreui-pro-react-admin-template-v$npm_package_version.zip -9 HEAD"
  },
  "bugs": {
    "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 10",
    "not op_mini all"
  ],
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!**/*index.js",
      "!src/serviceWorker.js",
      "!src/polyfill.js"
    ]
  },
  "engines": {
    "node": ">=8.16",
    "npm": ">=6"
  }
}

Gilliangilliard

Seeing the same issue. My guess is updating the babel packages is changing how it handles parsing the module code. When removing the package-lock.json, a more up to date babel version gets pulled in on install. – Olenta

Having the same issue. I have done some investigation. Single line comments (started with //) in code of trees.js are translated to multiline (/* */) and it turns out a nested mutiline comments (/* /* */ */) which caused error. – Implantation

The choice of style by the author of the library allows comment to be placed between the function declaration and same function codeblock. Which causes babel to have issues transpilling the codes properly. – Entail

#262 issue is resolved in recent version of pako, released with the fix 2.1.0 Changelog : github.com/nodeca/pako/blob/master/… – Indubitable

Answer 1

I made a workaround. I compared my old and new package-lock.json of my projects and I saw some @babel lib version changed to v7.20.2 (on Nov 4th, 2022). I overwrote the new package-lock.json with old one and my react app built and ran successfully again.

I then changed (downgrade) some of @babel package in my package.json and it is solved the problem:

Put this lines into your package.json file:

"@babel/core": "7.19.6",
"@babel/generator": "7.19.6",
"@babel/compat-data": "7.19.4",
"@babel/helper-compilation-targets": "7.19.3",
"@babel/helper-create-class-features-plugin":"7.19.0",
"@babel/helper-module-transforms":"7.19.6",

Meganmeganthropus

Hey, that fixed my issue - but i needed also to add it the the 'resolutions' (yarn overrides) to make it work for me – Larochelle

Yes you need to put in your dependencies but also in your resolutions if you are working with CRA. Also take a look at you npm version. The overrides is supported in 8.3+. – Devitrify

Answer 2

https://github.com/babel/babel/issues/15132

Babel fixed their issue. you can use the latest version and it should work now. (I verified it)

Saharan

updating "@babel/core": "7.20.2" worked for me – Indubitable

I'm still experiencing this in 7.24.7, so no, not fixed, or it just returned. – Doolittle

Answer 3

extending @Attila Szombathelyi's answer, If you are using CRA, you can make use of resolutions in your package.json

{
    "name": "app-name",
    "version": "1.0.0",
    "dependencies": {
      ...
    },
    ...
    "resolutions": {
      "@babel/core": "7.19.6",
      "@babel/generator": "7.19.6",
      "@babel/compat-data": "7.19.4",
      "@babel/helper-compilation-targets": "7.19.3",
      "@babel/helper-create-class-features-plugin": "7.19.0",
      "@babel/helper-module-transforms": "7.19.6",
      "babel-loader": "8.2.5"
    }
  }

Chrystal

Answer 4

Solution in my case was to disable babel dependencies transpilation (which was enabled in our project).

How I did it? In my project vue-cli is used. So I have disabed transpileDependecies option in vue.config.js

If you are using a bare webpack you may also find appropriate solution for it or any other build system.

Implantation

Can you explain how you did this? What did you add to transpileDependencies? – Doolittle

Answer 5

Workaround: As of npm 8.3.0, you can also use npm's overrides in package.json. Delete package-lock.json and node_modules folder (recommended).

"overrides": {
        "@babel/core": "7.19.6",
        "@babel/generator": "7.19.6",
        "@babel/compat-data": "7.19.4",
        "@babel/helper-compilation-targets": "7.19.3",
        "@babel/helper-create-class-features-plugin": "7.19.0",
        "@babel/helper-module-transforms": "7.19.6"
    }

Decumbent

Answer 6

NextJS Solution

I was getting this error when trying to use the firebase-admin/remote-config library in a server action. To fix it, I just needed to add use server to the top of the file.

Footrope