'Template Literal Type: Maximum call stack size exceeded

I am getting the following error:

ERROR in RangeError: Maximum call stack size exceeded
    at getResolvedBaseConstraint (/project/node_modules/typescript/lib/typescript.js:53262:43)
    at getBaseConstraintOfType (/project/node_modules/typescript/lib/typescript.js:53242:34)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:37)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)

I have the following in global.d.ts:

declare type UserId = `${number}`;
declare interface DevEnvironment {
  dev?: {
    user?: {
      userId?: UserId;
    }
  }
}

In the above interface, if I change userId?: UserId to userId?: string, then the above error goes away. I think it is because of this template literal bug.

However, I am using the above like so; here I am building my environment file in my dev environment:

let dev = {};
try {
  // The below file may or may not exists depending on the environment
  dev = require('./environment.local').dev;
} catch (e) { }

export const environment = Object.assign({}, {
  // Main environment variables
}, {dev: dev || {}} as DevEnvironment);

I then utilize it in a service:

@Injectable({ providedIn: 'root' })
export class User {
  get userId(): UserId {
    const defaultValue = (environment.dev?.user?.userId || '000000000') as UserId;
  }
}

I know that the issue has said to have been fixed in newer versions of typescript, but we are stuck with 4.1.5 due to the usage of Angular 11 cli as seen here:

$ npm i typescript@^4.2.0
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"^11.2.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   @angular-devkit/build-angular@">=0.1000.0 < 0.1100.0" from @angular-builders/[email protected]
npm ERR!   node_modules/@angular-builders/custom-webpack
npm ERR!     dev @angular-builders/custom-webpack@"^10.0.1" from the root project
npm ERR!   dev @angular-devkit/build-angular@"^0.1002.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/rnaddy/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rnaddy/.npm/_logs/2021-07-08T15_28_45_346Z-debug.log

Is there something that I can do to use the syntax that I wanted to initially use?

Solution 1:^[1]

This is an internal Typescript bug, for me production worked but not development.

Update typescript as suggested, even it's not exactly the same output it's the same problem.

I have no idea which version actually work, I ended up with 4.x.x it and magically work as expected.

Solution 2:^[2]

If you're using typescript lower than 4 you get this error, upgrade to the latest one and chill))

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Remy
Solution 2	Gor

'Template Literal Type: Maximum call stack size exceeded

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]