[Bug]: Unable to use pako in create-react-app 5 with latest babel v7.20.x

[cmdcolin]

💻

• Would you like to work on a fix?

How are you using Babel?

Other (Next.js, Gatsby, vue-cli, ...)

Input code

The file from pako is node_modules/pako/dist/pako.esm.mjs

const gen_bitlen = (s, desc) =>
//    hello_deflate_state *s;
//    tree_desc *desc;    /* the tree descriptor */
{
  const tree            = desc.dyn_tree;
  const max_code        = desc.max_code;
 

The error from a build is

$ yarn build
yarn run v1.22.18
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Module parse failed: Unexpected token (255:129)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|  *     not null.
|  */
> var gen_bitlen = function gen_bitlen(s, desc) /*    hello_deflate_state *s;*/ /*    tree_desc *desc;    /* the tree descriptor */*/{
|   var tree = desc.dyn_tree;
|   var max_code = desc.max_code;

Configuration file name

package.json

Configuration

I use a default version of installing create-react-app with yarn.lock in https://github.com/cmdcolin/pako_error_in_cra5

Can eject the cra config to see details

Current and expected behavior

This I believe is a fairly recently change, and I'm not certain it's babel that does this type of conversion of comment formats. If this is not true I can redirect this issue elsewhere!

The code worked when my yarn.lock has e.g. ~7.19.x versions of babel packages, but started failing now at ~7.20.x. there are many babel packages so I'm not sure which but a diff between working and non-working is at this pastebin https://pastebin.com/xe3HSAgW

Environment

• babel 7.20.x (failing) babel 7.19.x (working)
• node 18.20
• yarn 1.22.18
• ubuntu 22.10
• not a monorepo but testing in a create react app

reproducible repo here https://github.com/cmdcolin/pako_error_in_cra5

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @cmdcolin! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[cmdcolin]

Might be dupe of #15111 can close if so!

[cmdcolin]

i'll just close my own issue, it's very likely a dupe :)

[JLHwung]

It seems like a new issue.

The line comment // tree_desc *desc; /* the tree descriptor */ is valid, however Babel generates a block comment /* tree_desc /* tree descriptor */ */ which completely messes up with the /* */ pair within the line comment.

[JLHwung]

@cmdcolin The fix of #15111 has been published in 7.20.2, can you reproduce this issue on 7.20.2?

[cmdcolin]

I think https://github.com/cmdcolin/pako_error_in_cra5 is using 7.20.2 of @babel/core

can see in yarn.lock for details

and it does still produce the error. do you think this issue should re-open?

[srijanreddy98]

This is happening to me in angular as well.
`./node_modules/pako/lib/zlib/trees.js:257:106 - Error: Module parse failed: Unexpected token (257:106)
File was processed with these loaders:

• ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
• ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/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;`

@JLHwung Any eta on when the fix will be published?

[JBCodeWorld]

Same error with React JS.

#13 246.2 
#13 246.2 Module parse failed: Unexpected token (10116:106)
#13 246.2 File was processed with these loaders:
#13 246.2  * ./node_modules/babel-loader/lib/index.js
#13 246.2 You may need an additional loader to handle the result of these loaders.
#13 246.2 |  */
#13 246.2 | 
#13 246.2 > function gen_bitlen(s, desc) /*    deflate_state *s;*/ /*    tree_desc *desc;    /* the tree descriptor */*/{
#13 246.2 |   var tree = desc.dyn_tree;
#13 246.2 |   var max_code = desc.max_code;
#13 246.2 
#13 246.2 
#13 ERROR: executor failed running [/bin/sh -c npm run build]: runc did not terminate sucessfully

[nakulkundra]

Still getting the below error after taking the latest 7.20.3

File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.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;

[liuxingbaoyu]

@nakulkundra https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/package.json#L13-L14
It seems that angular is still using the old version, can you try https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides?

[nakulkundra]

@liuxingbaoyu tried what you suggested , but no luck,.

 "overrides": {
    "@angular-devkit/build-angular": {
      "@babel/generator": "7.20.3"
    }}

Not working, getting the below error.

./node_modules/@progress/kendo-drawing/node_modules/pako/dist/pako_deflate.js:2504:112 - Error: Module parse failed: Unexpected token (2504:112)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.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;

./node_modules/pdfmake/build/pdfmake.js:43324:116 - Error: Module parse failed: Unexpected token (43324:116)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.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;

./node_modules/xlsx/jszip.js:7853:112 - Error: Module parse failed: Unexpected token (7853:112)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.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;

Package File

{
  "name": "neon-asdasd",
  "version": "2.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --configuration development",
    "build": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --base-href /ui/ --configuration production --build-optimizer",
    "buildcontainer": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --configuration production --build-optimizer --base-href=/ui/",
    "test": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng test --source-map=true",
    "lint": "ng lint",
    "test-headless": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng test --watch=false --browsers=ChromeHeadless --code-coverage",
    "e2e": "ng e2e",
    "sonar": "sonar-scanner"
  },
  "private": true,
  "browserslist": [
    "last 2 Chrome versions"
  ],
  "dependencies": {
    "@ag-grid-community/angular": "~25.3.0",
    "@ag-grid-enterprise/all-modules": "~25.3.0",
    "@amcharts/amcharts4": "4.10.27",
    "@amcharts/amcharts4-geodata": "4.1.23",
    "@angular/animations": "13.3.11",
    "@angular/cdk": "9.2.4",
    "@angular/common": "13.3.11",
    "@angular/compiler": "13.3.11",
    "@angular/core": "13.3.11",
    "@angular/forms": "13.3.11",
    "@angular/localize": "13.3.11",
    "@angular/material": "9.2.4",
    "@angular/platform-browser": "13.3.11",
    "@angular/platform-browser-dynamic": "13.3.11",
    "@angular/router": "13.3.11",
    "@aspnet/signalr": "1.1.4",
    "@auth0/angular-jwt": "5.0.2",
    "@googlemaps/js-api-loader": "1.12.3",
    "@microsoft/applicationinsights-web": "2.5.10",
    "@ngx-translate/core": "~14.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "@popperjs/core": "2.11.5",
    "@progress/kendo-angular-buttons": "~7.0.0",
    "@progress/kendo-angular-common": "~2.0.0",
    "@progress/kendo-angular-dateinputs": "4.4.1",
    "@progress/kendo-angular-dialog": "~6.0.0",
    "@progress/kendo-angular-dropdowns": "~6.0.0",
    "@progress/kendo-angular-editor": "~3.1.2",
    "@progress/kendo-angular-gauges": "3.0.3",
    "@progress/kendo-angular-inputs": "~8.0.0",
    "@progress/kendo-angular-intl": "~3.0.0",
    "@progress/kendo-angular-l10n": "~3.0.0",
    "@progress/kendo-angular-label": "2.3.4",
    "@progress/kendo-angular-layout": "~6.0.0",
    "@progress/kendo-angular-popup": "~4.0.0",
    "@progress/kendo-angular-progressbar": "~2.0.0",
    "@progress/kendo-angular-resize-sensor": "3.2.0",
    "@progress/kendo-angular-scheduler": "1.2.4",
    "@progress/kendo-angular-toolbar": "~5.0.0",
    "@progress/kendo-angular-tooltip": "2.1.6",
    "@progress/kendo-angular-treeview": "~6.0.0",
    "@progress/kendo-charts": "1.15.0",
    "@progress/kendo-data-query": "1.5.4",
    "@progress/kendo-date-math": "1.5.1",
    "@progress/kendo-drawing": "~1.5.12",
    "@progress/kendo-licensing": "~1.0.2",
    "@progress/kendo-react-dropdowns": "4.12.0",
    "@progress/kendo-recurrence": "1.0.1",
    "@progress/kendo-schematics": "1.2.0",
    "@progress/kendo-theme-default": "4.28.0",
    "@progress/kendo-ui": "2021.3.1109",
    "@types/file-saver": "~1.3.1",
    "@types/googlemaps": "3.40.5",
    "ag-grid-angular": "25.3.0",
    "ag-grid-community": "25.3.0",
    "ag-grid-enterprise": "25.3.0",
    "angular-2-dropdown-multiselect": "1.9.0",
    "angular-gridster2": "~9.3.4",
    "angular-oauth2-oidc": "~10.0.3",
    "angular2-query-builder": "0.6.2",
    "bootstrap": "^5.1.3",
    "core-js": " 3.22.8",
    "crypto-js": "~4.1.1",
    "file-saver": "~2.0.5",
    "http-status-codes": "2.1.4",
    "jquery": "3.6.0",
    "jquery-ui": "1.13.2",
    "json-stringify-safe": "5.0.1",
    "jszip": "3.7.1",
    "jw-paginate": "1.0.4",
    "microsoft-adal-angular6": "1.3.0",
    "moment": "~2.29.2",
    "ng2-bootstrap-modal": "~1.0.1",
    "ng2-signalr": "10.1.0",
    "ngx-bootstrap": "~6.0.0",
    "ngx-cacheable": "1.2.5",
    "ngx-clipboard": "13.0.1",
    "ngx-infinite-scroll": "0.8.4",
    "ngx-quill": "~10.0.5",
    "ngx-slick": "0.2.1",
    "ngx-slick-fix": "0.1.3",
    "ngx-window-token": "~5.0.0",
    "ngx-xml2json": "1.0.2",
    "nprogress": "0.2.0",
    "numeral": "2.0.6",
    "popper.js": "^1.16.1",
    "quill": "1.3.7",
    "quill-to-pdf": "1.0.5",
    "rxjs": "6.6.7",
    "rxjs-compat": "6.5.3",
    "signalr": "2.4.1",
    "slick-carousel": "^1.8.1",
    "sweetalert2": "~7.33.1",
    "toastr": "2.1.4",
    "trackable-entities": "1.0.0-alpha.2",
    "tslib": "2.0.3",
    "typescript-string-operations": "1.4.1",
    "util": "~0.12.4",
    "webpack": "~5.73.0",
    "zone.js": "0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.3.9",
    "@angular/cli": "13.3.7",
    "@angular/compiler-cli": "13.3.11",
    "@angular/language-service": "13.3.11",
    "@types/angular": "1.7.2",
    "@types/jasmine": "3.6.11",
    "@types/jasminewd2": "~2.0.10",
    "@types/jquery": "~3.5.14",
    "@types/node": "14.14.19",
    "codelyzer": "~6.0.2",
    "html-loader": "3.1.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~6.0.0",
    "karma": "6.3.17",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.2",
    "karma-jasmine-html-reporter": "~1.7.0",
    "karma-spec-reporter": "0.0.32",
    "karma-trx-reporter": "0.4.3",
    "protractor": "~7.0.0",
    "ts-node": "~9.1.1",
    "tslint": "~6.1.0",
    "typescript": "4.6.4"
  },
  "overrides": {
    "@angular-devkit/build-angular": {
      "@babel/generator": "7.20.3"
    }
  }
}

`

[JLHwung]

@nakulkundra What's the npm version? The overrides is supported in 8.3+.

[srijanreddy98]

Hi @JLHwung. I added the ovveride:

  "overrides": {
    "@angular-devkit/build-angular": {
      "@babel/generator": "7.20.3"
    }
  }

My npm version: 8.19.3. But I am still getting the error.

I was checking through the package lock. I found two listings of babel generator:

"node_modules/@babel/generator": {
      "version": "7.20.3",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.3.tgz",
      "integrity": "sha512-Wl5ilw2UD1+ZYprHVprxHZJCFeBWlzZYOovE4SDYLZnqCOD11j+0QzNeEWKLLTWM7nixrZEh7vNIyb76MyJg3A==",
      "dependencies": {
        "@babel/types": "^7.20.2",
        "@jridgewell/gen-mapping": "^0.3.2",
        "jsesc": "^2.5.1"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },

and

    "@babel/generator": {
      "version": "7.20.3",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.3.tgz",
      "integrity": "sha512-Wl5ilw2UD1+ZYprHVprxHZJCFeBWlzZYOovE4SDYLZnqCOD11j+0QzNeEWKLLTWM7nixrZEh7vNIyb76MyJg3A==",
      "requires": {
        "@babel/types": "^7.20.2",
        "@jridgewell/gen-mapping": "^0.3.2",
        "jsesc": "^2.5.1"
      },
      "dependencies": {
        "@jridgewell/gen-mapping": {
          "version": "0.3.2",
          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
          "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
          "requires": {
            "@jridgewell/set-array": "^1.0.1",
            "@jridgewell/sourcemap-codec": "^1.4.10",
            "@jridgewell/trace-mapping": "^0.3.9"
          }
        }
      }
    },

Any ideas?

[JLHwung]

@srijanreddy98 What does npm ls @babel/generator print? You can also wait for angular/angular-cli#24193

[srijanreddy98]

@JLHwung it prints:

oppia@3.2.8 /Users/.../Documents/oppia/oppia
├─┬ @angular-devkit/build-angular@13.3.9
│ ├─┬ @angular/localize@13.3.11
│ │ └─┬ @babel/core@7.17.2
│ │   └── @babel/generator@7.20.3 deduped
│ ├─┬ @babel/core@7.16.12
│ │ └── @babel/generator@7.20.3 deduped
│ └── @babel/generator@7.20.3
├─┬ @angular/compiler-cli@13.3.11
│ └─┬ @babel/core@7.20.2
│   └── @babel/generator@7.20.3 deduped
└─┬ babel-eslint@10.1.0
  └─┬ @babel/traverse@7.20.1
    └── @babel/generator@7.20.3 deduped

[JLHwung]

@srijanreddy98 The version seems good to me. Did you try removing the cache?

rm -rf node_modules/.cache

If it does not help, try removing the node_modules and do a clean install again.

Since I can't reproduce the OP's issue on REPL, I believe it has been fixed in 7.20.3. If you think this is a Babel issue, please open a new issue with a reproducible repo.

[srijanreddy98]

@JLHwung really appreciate your help. I was not able to fix it on the babel side of things. It was proving very difficult to pin down versions on babel side with no results popping up in my favour. (We typically use yarn but I even tried npm which has an easier way with overrides than yarn resolutions).

For folks coming to this issue looking for resolutions:

I resolved by pinning down the version of Pako to 2.1.0 (the latest version just released at the time of the comment to fix the babel problems). Check npm override or yarn resolutions to pin it down. To figure out which packages you need to pin the pako version: run npm ls pako to get a dependency tree. Non ideal solution but give it a try.

My npm ls pako returned:

oppia@3.2.8 /Users/redvasa/Documents/oppia/oppia
├─┬ @angular-devkit/build-angular@13.3.9
│ └─┬ piscina@3.2.0
│   └─┬ hdr-histogram-js@2.0.3
│     └── pako@^1.0.3
└─┬ browserify-zlib@0.2.0
  └── pako@~1.0.5

So I added (for yarn):

  "resolutions": {
    "@angular-devkit/build-angular/piscina/hdr-histogram-js/pako": "2.1.0",
    "browserify-zlib/pako": "2.1.0"
  }