RangeError: Maximum call stack size exceeded when importing Carbon LDP in a React app using create-react-app with TypeScript 3.2.2

[alex-arriaga]

Hi,
I am getting this error when importing Carbon LDP in a React application that is using TypeScript

RangeError: Maximum call stack size exceeded
    at resolveNameHelper (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:31831:35)
    at resolveName (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:31829:20)
    at resolveEntityName (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:32680:26)
    at resolveTypeReferenceName (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:38485:20)
    at getTypeFromTypeReference (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:38670:30)
    at getTypeFromTypeNode (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:40178:28)
    at getConstraintFromTypeParameter (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:38328:72)
    at fillMissingTypeArguments (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:37877:49)
    at getTypeFromClassOrInterfaceReference (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:38429:78)
    at getTypeReferenceTypeWorker (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:38559:24)
RangeError: Maximum call stack size exceeded

Source code

Repository with the minimal setup that reproduces the issue: https://github.com/webtraining-zone/carbonldp-demo-app

Version of some packages:

• TypeScript: "3.2.2"
• Node.js: "v10.14.1"
• Yarn: "1.7.0"

Steps to reproduce

1. Be sure you are in version 2.x of create-react-app package

create-react-app --version
2.1.1

2. Create a react app with TypeScript support

create-react-app carbonldp-demo-app --typescript

3. Start the react app with Yarn

cd carbonldp-demo-app/
yarn start

The ouput woud look like this:

Compiled successfully!

You can now view carbonldp-demo-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.13.13.145:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

4. Install Carbon LDP with Yarn

yarn add carbonldp

5. Create a Carbon Service class with a valid Carbon LDP instance creation

touch src/CarbonLDPService.ts

And add this code:

import {CarbonLDP} from 'carbonldp/CarbonLDP';

class CarbonLDPService {

  constructor() {
    const carbonldp: CarbonLDP = new CarbonLDP('http://localhost:8083');
    this.extendCarbonLDPSchema();
  }

  extendCarbonLDPSchema() {
  }

}

export default CarbonLDPService;

6. Try to run the app again, and the error will appear.

yarn start

[alex-arriaga]

Running a build sends the same error:

yarn build

Output

$ react-scripts build
Creating an optimized production build...
/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/fork-ts-checker-webpack-plugin-alt/lib/service.js:22
        throw error;
        ^

RangeError: Maximum call stack size exceeded
    at resolveNameHelper (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:31831:35)
    at resolveName (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:31829:20)
    at resolveEntityName (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:32680:26)
    at resolveTypeReferenceName (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:38485:20)
    at getTypeFromTypeReference (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:38670:30)
    at getTypeFromTypeNode (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:40178:28)
    at getConstraintFromTypeParameter (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:38328:72)
    at fillMissingTypeArguments (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:37877:49)
    at getTypeFromClassOrInterfaceReference (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:38429:78)
    at getTypeReferenceTypeWorker (/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/typescript/lib/typescript.js:38559:24)
✨  Done in 30.04s.

[roddolf]

It's an error with TypeScript:

• Maximum call stack size exceeded at [email protected] and @next microsoft/TypeScript#28785
• typesafe-joi blows up TypeScript 3.2+ microsoft/TypeScript#28873

Installing 3.1 should work.

[alex-arriaga]

FYI: I did a downgrade to TypeScript 3.0.1, and now I am getting this error:

Failed to compile.

/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/carbonldp/Context/AbstractContext.d.ts
Type error: Type 'undefined' does not satisfy the constraint 'AbstractContext<RegisteredPointer, ResolvablePointer, undefined>'.  TS2344

     9 | import { Context } from "./Context";
    10 | import { ContextSettings } from "./ContextSettings";
  > 11 | export declare abstract class AbstractContext<REGISTRY extends RegisteredPointer = RegisteredPointer, REPOSITORY extends ResolvablePointer = ResolvablePointer, PARENT extends AbstractContext = undefined> implements Context {
       |                                                                                                                                                                                                  ^
    12 |     abstract readonly registry: GeneralRegistry<REGISTRY> | undefined;
    13 |     abstract readonly repository: GeneralRepository<REPOSITORY> | undefined;
    14 |     readonly jsonldConverter: JSONLDConverter;

I will try with TypeScript 3.1.1 and I will let you know how it goes.

[alex-arriaga]

Now, with TypeScript 3.1.1 this is the output:

yarn install v1.7.0
Failed to compile.

/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/carbonldp/Context/AbstractContext.d.ts
Type error: Type 'undefined' does not satisfy the constraint 'AbstractContext<RegisteredPointer, ResolvablePointer, undefined>'.  TS2344

     9 | import { Context } from "./Context";
    10 | import { ContextSettings } from "./ContextSettings";
  > 11 | export declare abstract class AbstractContext<REGISTRY extends RegisteredPointer = RegisteredPointer, REPOSITORY extends ResolvablePointer = ResolvablePointer, PARENT extends AbstractContext = undefined> implements Context {
       |                                                                                                                                                                                                  ^
    12 |     abstract readonly registry: GeneralRegistry<REGISTRY> | undefined;
    13 |     abstract readonly repository: GeneralRepository<REPOSITORY> | undefined;
    14 |     readonly jsonldConverter: JSONLDConverter;

[roddolf]

Also changing the configuration of TS to strict: false will work.

Currently, not all the SDK types support the strict feature, an issue has been opened: #336.

[alex-arriaga]

Just for fun, I changed to TypeScript 3.1.6 and this is what is displayed:

Failed to compile.

/Users/alex/Sites/projects/carbonldp-demo-app/node_modules/carbonldp/Context/AbstractContext.d.ts
Type error: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.  TS2583

    19 |     protected _settings?: ContextSettings;
    20 |     protected _generalObjectSchema?: DigestedObjectSchema;
  > 21 |     protected _typeObjectSchemaMap: Map<string, DigestedObjectSchema>;
       |                                     ^
    22 |     constructor(parentContext?: PARENT);
    23 |     resolve(relativeURI: string): string;
    24 |     hasObjectSchema(type: string): boolean;
^C⏎   

Using this tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

[roddolf]

The SDK uses es2015 objects like Map and Set.
So, you need to change the target to es2015 or if you want to maintain the compatibility with polyfills you can specify the library to use with "lib": [ "es2015" ]

[alex-arriaga]

FYI:

1. I have to use "typescript": "3.1.6" and...
2. The configuration with "lib": ["es5", "es2015", "dom"] and strict to false, here is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "lib": ["es5", "es2015", "dom"]
  },
  "include": [
    "src"
  ]
}