Error after upgrading angular 17 to 18, maximum call stack error by colorette

Question

I have upgraded my version from angular 17 to 18. I am trying to run ng serve or ng build and getting the error below.

\app\node_modules\listr2\node_modules\colorette\index.cjs:54 head = string.substring(0, index) + replace, ^

RangeError: Maximum call stack size exceeded at String.substring (<anonymous>) at replaceClose (C:\Users\E02973\Desktop\n6 - Copy (2)\app\node_modules\listr2\node_modules\colorette\index.cjs:54:17) at replaceClose (C:\Users\E02973\Desktop\n6 - Copy(2)\app\node_modules\listr2\node_modules\colorette\index.cjs:57:32) at replaceClose (C:\Users\E02973\Desktop\n6 - Copy (2)\app\node_modules\listr2\node_modules\colorette\index.cjs:57:32) at replaceClose (C:\Users\E02973\Desktop\n6 - Copy (2)\app\node_modules\listr2\node_modules\colorette\index.cjs:57:32) at replaceClose (C:\Users\E02973\Desktop\n6 - Copy (2)\app\node_modules\listr2\node_modules\colorette\index.cjs:57:32)

Node.js v20.17.0

---

When I am running the application, the colorette issue should not occur. If I use some old version but there some auto dependencies on new version I can not be modify them.

Answer 1

Colorette is not the cause of the error, it's just a tool that helps format the actual errors.

What I did is open node_modules/colorette/index.cjs and replace the replaceClose method with this (adding a console.log)

const replaceClose = (
  index,
  string,
  close,
  replace,
  head = string.substring(0, index) + replace,
  tail = string.substring(index + close.length),
  next = tail.indexOf(close)
) => {
  console.log(index, string, close, replace);
  return head + (next < 0 ? tail : replaceClose(next, tail, close, replace));
}

This will log tons of messages, but they will be the actual error and not the colorette error.