Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RangeError: Maximum call stack size exceeded #104

Closed
vigneshSivanesan opened this issue Aug 27, 2024 · 28 comments
Closed

RangeError: Maximum call stack size exceeded #104

vigneshSivanesan opened this issue Aug 27, 2024 · 28 comments

Comments

@vigneshSivanesan
Copy link

vigneshSivanesan commented Aug 27, 2024

MyProjectLocation\angular\node_modules\colorette\index.cjs:49
const replaceClose = (
                     ^

RangeError: Maximum call stack size exceeded
    at replaceClose (MyProjectLocation\angular\node_modules\colorette\index.cjs:49:22)
    at replaceClose (MyProjectLocation\angular\node_modules\colorette\index.cjs:57:32)
    at replaceClose (MyProjectLocation\angular\node_modules\colorette\index.cjs:57:32)

This package throws maximum call stack size exceeds. It is used in my application through indirect dependency.

@jorgebucaran
Copy link
Owner

Could you provide a concise way to repro the issue? I am not really sure what we're looking at here.

@vigneshSivanesan
Copy link
Author

I'm updating the angular version from 17.0.4 to 18.1.1 with node version of 20.16.0

This is the package.json I've using. At the time of compiling the project, it throws error.

{
  "name": "MyProject",
  "version": "1.1.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "publish": "gulp build && ng build --configuration production",
    "start": "gulp buildDev && node --max-old-space-size=26192 node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --port 4200",
    "dev": "gulp buildDev && node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --port 4200 --configuration development",
  },
  "private": false,
  "dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular-eslint/eslint-plugin": "^18.1.0",
    "@angular/animations": "^18.1.1",
    "@angular/cdk": "^18.1.1",
    "@angular/common": "^18.1.1",
    "@angular/compiler": "^18.1.1",
    "@angular/core": "^18.1.1",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^18.1.1",
    "@angular/google-maps": "^17.3.0",
    "@angular/localize": "^17.0.9",
    "@angular/material": "^17.0.5",
    "@angular/platform-browser": "^18.1.1",
    "@angular/platform-browser-dynamic": "^18.1.1",
    "@angular/platform-server": "^18.1.1",
    "@angular/router": "^18.1.1",
    "@awaismirza/angular2-counto": "^0.0.2",
    "@azure/msal-browser": "^3.20.0",
    "@craftsjs/perfect-scrollbar": "^5.1.0",
    "@danielmoncada/angular-datetime-picker": "^17.0.0",
    "@eve-sama/ngx-signature-pad": "^16.0.0",
    "@fullcalendar/angular": "^6.1.10",
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.5",
    "@fullcalendar/interaction": "^6.1.5",
    "@fullcalendar/list": "^6.1.5",
    "@fullcalendar/moment": "^6.1.5",
    "@fullcalendar/multimonth": "^6.1.5",
    "@fullcalendar/rrule": "^6.1.10",
    "@fullcalendar/timegrid": "^6.1.5",
    "@googlemaps/markerclusterer": "^2.5.3",
    "@hreimer/angular-image-viewer": "^0.14.1",
    "@igniteui/angular-schematics": "~10.2.620",
    "@igniteui/material-icons-extended": "^3.0.2",
    "@infragistics/igniteui-angular": "^17.0.9",
    "@maskito/angular": "^1.8.1",
    "@maskito/core": "^1.8.1",
    "@material/dialog": "^14.0.0",
    "@microsoft/signalr": "^8.0.7",
    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
    "@ng-select/ng-select": "^9.1.0",
    "@pdftron/webviewer": "^10.7.3",
    "@popperjs/core": "^2.11.8",
    "@stripe/stripe-js": "^3.3.0",
    "@swimlane/ngx-charts": "^20.5.0",
    "@types/google.maps": "^3.55.4",
    "@types/hammerjs": "^2.0.36",
    "@typescript-eslint/eslint-plugin-tslint": "^6.7.3",
    "@videogular/ngx-videogular": "^8.0.0",
    "abp-ng2-module": "^11.0.0",
    "abp-web-resources": "^5.9.2",
    "adal-angular": "^1.0.18",
    "agm-direction": "^0.8.9",
    "agm-overlays": "^2.0.0",
    "angular-cc-library": "^2.1.2",
    "angular-credit-cards": "^3.1.9",
    "angular-cropperjs": "^14.0.1",
    "angular-dual-listbox": "^7.0.0",
    "angular-gridster2": "^18.0.1",
    "angular-imask": "^7.6.1",
    "angular-mentions": "^1.5.0",
    "angular-oauth2-oidc": "^17.0.2",
    "angular2-counto": "^1.2.5",
    "angular2-text-mask": "^9.0.0",
    "animate.css": "^4.1.1",
    "chart.js": "^4.4.3",
    "ckeditor4-angular": "^4.0.1",
    "cookieconsent": "^3.1.1",
    "core-js": "^3.37.1",
    "core-util-is": "^1.0.3",
    "cropperjs": "1.5.13",
    "exceljs": "^4.4.0",
    "famfamfam-flags": "^1.0.0",
    "file-saver": "^2.0.5",
    "fluentvalidation-ts": "^3.1.0",
    "font-awesome": "^4.7.0",
    "force": "0.0.3",
    "fullcalendar": "^6.1.10",
    "hammerjs": "^2.0.8",
    "heic2any": "^0.0.4",
    "html2canvas": "^1.4.1",
    "idb": "^8.0.0",
    "igniteui-theming": "^3.0.1",
    "js-cookie": "^3.0.5",
    "jspdf": "^2.5.1",
    "jszip": "^3.10.1",
    "just-compare": "^2.3.0",
    "localforage": "^1.10.0",
    "lodash-es": "^4.17.21",
    "luxon": "^3.4.4",
    "marked": "^9.0.0",
    "material-design-icons": "^3.0.1",
    "minireset.css": "^0.0.7",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.39",
    "ng-circle-progress": "^1.6.0",
    "ng-pick-datetime": "^7.0.0",
    "ng-recaptcha": "^13.2.1",
    "ng2-file-upload": "^7.0.1",
    "ng2-image-viewer": "^3.0.5",
    "ng2-pdf-viewer": "^9.1.3",
    "ng2-pdfjs-viewer": "^15.0.0",
    "ngx-audio-player": "^11.0.4",
    "ngx-bootstrap": "^18.0.2",
    "ngx-captcha": "^11.0.0",
    "ngx-color-picker": "^15.0.0",
    "ngx-credit-cards": "^1.0.9",
    "ngx-device-detector": "^7.0.0",
    "ngx-doc-viewer": "^15.0.1",
    "ngx-image-cropper": "^8.0.0",
    "ngx-image-viewer": "^1.0.13",
    "ngx-markdown": "^17.1.1",
    "ngx-mask": "^13.0.3",
    "ngx-mat-timepicker": "^17.0.2",
    "ngx-panzoom": "^17.0.0",
    "ngx-perfect-scrollbar": "^10.1.1",
    "ngx-scrollbar": "^13.0.3",
    "ngx-spinner": "^17.0.0",
    "object-path": "^0.11.8",
    "pdf-merger-js": "^5.1.1",
    "perfect-scrollbar": "^1.5.5",
    "primeicons": "^7.0.0",
    "primeng": "^17.18.5",
    "pspdfkit": "^2024.3.1",
    "push.js": "^1.0.12",
    "quill": "^2.0.2",
    "resize-observer-polyfill": "^1.5.1",
    "rrule": "^2.8.1",
    "rtl-detect": "^1.1.2",
    "rxjs": "^7.8.1",
    "signature_pad": "^4.1.7",
    "simple-line-icons": "^2.5.5",
    "sweetalert2": "^11.12.3",
    "text-mask-addons": "^3.8.0",
    "tslib": "^2.6.3",
    "tslint": "^6.1.3",
    "web-animations-js": "^2.3.2",
    "webdriver-manager": "^12.1.9",
    "xlsx-js-style": "^1.2.0",
    "zone.js": "~0.14.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.1.1",
    "@angular/cli": "^18.1.1",
    "@angular/compiler-cli": "^18.1.1",
    "@angularclass/hmr": "^3.0.0",
    "@angularclass/hmr-loader": "^3.0.4",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "^2.0.13",
    "@types/lodash-es": "^4.17.12",
    "@types/luxon": "^3.4.2",
    "@types/node": "^20.14.12",
    "@typescript-eslint/eslint-plugin": "^7.17.0",
    "@typescript-eslint/parser": "^7.17.0",
    "codelyzer": "^6.0.2",
    "eslint": "^8.54.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-prettier": "^5.0.1",
    "globby": "^11.0.4",
    "gulp": "^5.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-gzip": "^1.4.2",
    "gulp-less": "^5.0.0",
    "gulp-postcss": "^10.0.0",
    "gulp-uglify": "^3.0.2",
    "jasmine-core": "~5.2.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "merge-stream": "^2.0.0",
    "nswag": "^14.1.0",
    "postcss-url": "^10.1.3",
    "prettier": "^3.3.3",
    "protractor": "7.0.0",
    "shx": "^0.3.4",
    "ts-node": "~10.9.2",
    "typescript": "5.5.4"
  }
}

@jorgebucaran
Copy link
Owner

Thanks for the info, but I'm still not sure how to go about reproducing your issue. How about switching from CommonJS to the ES module?

@Rishi-code-1
Copy link

\Desktop\n6 - Copy\app\node_modules\listr2\node_modules\colorette\index.cjs:49
const replaceClose = (
^

RangeError: Maximum call stack size exceeded
at replaceClose (C:\Users\E02973\Desktop\n6 - Copy\app\node_modules\listr2\node_modules\colorette\index.cjs:49:22)
at replaceClose (C:\Users\E02973\Desktop\n6 - Copy\app\node_modules\listr2\node_modules\colorette\index.cjs:57:32)
at replaceClose (C:\Users\E02973\Desktop\n6 - Copy\app\node_modules\listr2\node_modules\colorette\index.cjs:57:32)
.... more same line

Node.js v20.17.0

I am facing this issue while running ng serve or npm start after upgrading the version 12>13>14>15>16>17

this is my package.json
{
"name": "taf-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --live-reload=true --configuration=dev",
"build": "npm install && npm dedupe && ng b --configuration=dev",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^18.2.1",
"@angular/cdk": "^18.2.1",
"@angular/common": "^18.2.1",
"@angular/compiler": "^18.2.1",
"@angular/core": "^18.2.1",
"@angular/forms": "^18.2.1",
"@angular/material": "^18.2.1",
"@angular/platform-browser": "^18.2.1",
"@angular/platform-browser-dynamic": "^18.2.1",
"@angular/router": "^18.2.1",
"@ctrl/ngx-codemirror": "^7.0.0",
"@ngmodule/material-carousel": "^0.6.0",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@types/fabric": "5.3.9",
"angular-calendar": "^0.31.1",
"angular2-notifications": "^16.0.1",
"codemirror": "^6.0.1",
"fabric": "6.3.0",
"highcharts": "^11.4.7",
"highcharts-angular": "^4.0.1",
"jwt-decode": "^4.0.0",
"moment": "^2.30.1",
"moment-timezone": "^0.5.45",
"ng-recaptcha": "^13.2.1",
"ng9-odometer": "^2.1.0",
"ngx-json-viewer": "^3.2.1",
"ngx-moment": "^6.0.2",
"ngx-page-scroll": "^13.0.0",
"ngx-page-scroll-core": "^13.0.0",
"ngx-toastr": "^19.0.0",
"primeng": "^17.18.9",
"primeng-lts": "^12.2.5",
"rrule": "^2.8.1",
"rxjs": "^7.8.1",
"scriptjs": "^2.5.9",
"serializr": "^3.0.2",
"tslib": "^2.7.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.1",
"@angular-eslint/builder": "^18.3.0",
"@angular-eslint/eslint-plugin": "^18.3.0",
"@angular-eslint/eslint-plugin-template": "^18.3.0",
"@angular-eslint/schematics": "18.3.0",
"@angular-eslint/template-parser": "^18.3.0",
"@angular/cli": "^18.2.1",
"@angular/compiler-cli": "^18.2.1",
"@angular/language-service": "^18.2.1",
"@types/crypto-js": "^4.2.2",
"@types/jasmine": "~5.1.4",
"@types/jasminewd2": "~2.0.13",
"@types/node": "^22.5.1",
"@typescript-eslint/eslint-plugin": "8.3.0",
"@typescript-eslint/parser": "8.3.0",
"codelyzer": "^6.0.2",
"eslint": "^9.9.1",
"protractor": "~7.0.0",
"ts-node": "~10.9.2",
"tslint": "~6.1.3",
"typescript": "~5.5.4"
}
}

@jorgebucaran
Copy link
Owner

Could you help me repro the issue? The error log from your project (which I'm not familiar with...) isn't really very helpful. Any tips on how to recreate the problem would be great.

@Rishi-code-1
Copy link

I recently updated my Angular project through several major versions, starting from Angular 12 up to Angular 18. After each version update, I ran npm install, but I'm encountering an error when trying to run ng serve. I have already deleted the node_modules directory and package-lock.json, and then reinstalled the node packages. Additionally, I updated the colorette package and attempted various commands, but the issue persists. I’m not sure if this issue occurs with a new project, but after updating my existing Angular project incrementally from version 12 to 18, I encounter the same error with each version update. The error appears consistently after the upgrade process, despite following the appropriate update steps.

I have some screenshots of the error, which I can provide for further context.Uploading .docx…

@jorgebucaran
Copy link
Owner

Could you share which Node version you're using? And is it possible for you to upgrade to a more recent version?

@Rishi-code-1
Copy link

I am using the latest one v20.17.0

@jorgebucaran
Copy link
Owner

Thanks. From the log, it seems your project or another dependency is trying to require the CommonJS version of the module, when it should be using import instead. I'm also wondering if this might be related to Windows, since you and the other user seem to be using it. Could be just a fluke, though.

@Rishi-code-1
Copy link

Rishi-code-1 commented Aug 29, 2024

See the documents please let me know what to do.
[Uploading coloretteError.od
coloretteError.odt
t…]()

@Rishi-code-1
Copy link

I’ve observed some behavior with the colorette package. When I specify version 1.4.0 in my package.json, the error does not appear in node_modules/colorette. However, it seems that within the dependency tree, such as in node_modules/listr2/node_modules/colorette/index.cjs, the version of colorette is automatically downgraded. as 2.0.10. This version is creating issue . but The version of coloratte is not editable in automatically downgraded libarary.

@Rishi-code-1
Copy link

any update or please let'us know any alternate if exists.

@jorgebucaran
Copy link
Owner

Could you provide a minimal, simple/concise way to repro your issue? I can't debug this otherwise.

@thomand
Copy link

thomand commented Sep 16, 2024

I had the same issue. I'm not really sure what the root cause of the issue is, but I noticed that colorette was used by many dependencies in our app, so I tested adding

"resolutions": { "colorette": "latest" }

to package.json and that resolved the issue for us. So maybe different versions was being installed by some of the dependencies or something? I don't know, but it worked, so I didn't put anymore thought into it :)

@jorgebucaran
Copy link
Owner

Thank you for sharing. That's a simple and elegant solution to the issue.

@Raphi02
Copy link

Raphi02 commented Sep 20, 2024

Hello,

I have the same issue in my project and I am using the newest version available (2.0.20).

The problem is the recursion of the method replaceClose which has to many calls to itself and exceeds the stack size. I understand the method does the following:

Search the the input string string for every occurrence of close beginning from the index index and replace it with replace.

So I tried two methods, which solved my problem:

  1. Replace the recursion with a linear operation:
const replaceClose = function (
  index,
  string,
  close,
  replace,
  head = string.substring(0, index) + replace,
  tail = string.substring(index + close.length),
  next = tail.indexOf(close)
) {
  while (next >= 0) {
    index = next
    head = head + tail.substring(0, index) + replace
    tail = tail.substring(index + close.length)
    next = tail.indexOf(close)
  }
  return head + tail
}
  1. Make use of JavaScript string operations:
const replaceClose = (
  index,
  string,
  close,
  replace,
) => string.substring(0, index)
    + string.substring(index).replaceAll(close, replace)

I think the second solution is better as it reduces the number of substring significantly, is easier to understand and adheres to your code style. Also the first solution (and the current implementation inserts replace immediately after index although there might be no match (works with you your implementation as you give the index as parameter).

I tried to implement it but I cannot figure out how the tests are supposed to work. So I hope, that my suggestions can make it into an update.

Best regards
Raphael

@jorgebucaran
Copy link
Owner

To run the tests you just do npm run test.

@Raphi02
Copy link

Raphi02 commented Sep 20, 2024

When I run npm run test I get the following error message:

> [email protected] build
> npx rollup --format cjs --input index.js --file index.cjs
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'      
    at new NodeError (node:internal/errors:406:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:216:11)
    at defaultLoad (node:internal/modules/esm/load:118:3)
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'      
    at new NodeError (node:internal/errors:406:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:216:11)
    at defaultLoad (node:internal/modules/esm/load:118:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:396:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:56)
    at new ModuleJob (node:internal/modules/esm/module_job:65:26)
    at #createModuleJob (node:internal/modules/esm/loader:290:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:248:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:229:17)
    at async ModuleLoader.import (node:internal/modules/esm/loader:315:23)
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |       0 |        0 |       0 |       0 |                   
----------|---------|----------|---------|---------|-------------------

@jorgebucaran
Copy link
Owner

What Node version are you using?

@Raphi02
Copy link

Raphi02 commented Sep 20, 2024

20.9.0

@jorgebucaran
Copy link
Owner

Will give it ago, thanks.

@Raphi02
Copy link

Raphi02 commented Sep 20, 2024

Thank you, although I have to update my solutions. I fixed the stackoverflow which worked for me but my solutions are false. I will update my comment

@Rishi-code-1
Copy link

I encountered this error because I didn’t resolve the issues from the previous Angular version before upgrading. I was simply upgrading without addressing the existing errors. It’s important to fully resolve any issues in the current version before proceeding to the next upgrade; this way, errors like this won’t occur.Resolve any errors in each upgraded version and run your project. Once the project runs successfully, you can proceed to the next version upgrade. This will definitely work . I think there is no issue in colorette.

@jorgebucaran
Copy link
Owner

I still can't reproduce the issue here, and the comments in this thread seem mixed.

@Raphi02
Copy link

Raphi02 commented Sep 21, 2024

This is a way to reproduce the error (I used the tests/scripts/bin.js):

#!/usr/bin/env node

import { blue } from "../../index.js"

var string = ""

for (var i = 0; i < 1000000; i++) {
  string += `\x1b[${39}m`
}

console.log(blue(string))

I still do not understand why the error occurs running @angular/cli@18.* but it did.

@jorgebucaran
Copy link
Owner

Thanks for the snippet. Just to clarify, did you resolve the issue based on the comments above?

@Raphi02
Copy link

Raphi02 commented Sep 21, 2024

Yes, both 'work'. They do not result in the stack error. But I can not guarantee correct functionality for other use cases

@jorgebucaran
Copy link
Owner

Good to know, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants