Exception this throwing when install this package in ReactJS typescript application.

[Daham2000]

There is an exception throwing when installing this package in the ReactJS typescript application. Instalation is success but when using this package in code, (when importing from package this expectation this throwing.
Need a solution please.

Compiled with problems:X

ERROR in node_modules/@opentelemetry/sdk-metrics/build/src/aggregator/exponential-histogram/mapping/types.d.ts:11:5

TS1131: Property or signature expected.

     9 |     mapToIndex(value: number): number;
    10 |     lowerBoundary(index: number): number;
  > 11 |     get scale(): number;
       |     ^^^
    12 | }
    13 | //# sourceMappingURL=types.d.ts.map

ERROR in node_modules/@opentelemetry/sdk-metrics/build/src/aggregator/exponential-histogram/mapping/types.d.ts:11:9

TS1005: ';' expected.

     9 |     mapToIndex(value: number): number;
    10 |     lowerBoundary(index: number): number;
  > 11 |     get scale(): number;
       |         ^^^^^
    12 | }
    13 | //# sourceMappingURL=types.d.ts.map

ERROR in node_modules/@opentelemetry/sdk-metrics/build/src/aggregator/exponential-histogram/mapping/types.d.ts:11:16

TS1005: ';' expected.

     9 |     mapToIndex(value: number): number;
    10 |     lowerBoundary(index: number): number;
  > 11 |     get scale(): number;
       |                ^
    12 | }
    13 | //# sourceMappingURL=types.d.ts.map

ERROR in node_modules/@opentelemetry/sdk-metrics/build/src/aggregator/exponential-histogram/mapping/types.d.ts:12:1

TS1128: Declaration or statement expected.

    10 |     lowerBoundary(index: number): number;
    11 |     get scale(): number;
  > 12 | }
       | ^
    13 | //# sourceMappingURL=types.d.ts.map

[codecapitano]

Hi @Daham2000

Could you provide some additional information like:

• The SDK version and instrumentations you uses,
• How you initilialize Faro
  *...

Cheers,
Marco

[Daham2000]

Hi @codecapitano

1. package version: 1.2.8

2. How you initilialize Faro:
   Step 01: run npm i -S @grafana/faro-web-sdk
   Step 02: Add this code,

   I have followed the same instruction to initialize Faro code
   ```

          ```
      import {
        ConsoleInstrumentation,
        ConsoleTransport,
        ErrorsInstrumentation,
        FetchTransport,
        initializeFaro,
        LogLevel,
        SessionInstrumentation,
        WebVitalsInstrumentation,
      } from '@grafana/faro-web-sdk';
      
      const faro = initializeFaro({
        instrumentations: [
          new ErrorsInstrumentation(),
          new WebVitalsInstrumentation(),
          new ConsoleInstrumentation({
            disabledLevels: [LogLevel.TRACE, LogLevel.ERROR], // console.log will be captured
          }),
          new SessionInstrumentation(),
        ],
        transports: [
          new FetchTransport({
            url: 'http://localhost:12345/collect',
            apiKey: 'secret',
          }),
          new ConsoleTransport(),
        ],
        app: {
          name: 'frontend',
          version: '1.0.0',
        },
      });
      
      ```
   

   Step 03: run " npm start "

[Daham2000]

Hi, @codecapitano

Do you want more info or any updates about this issue?

[codecapitano]

Hey @Daham2000

No updates yet.
I used above init code with our demo app but could not reproduce the issue so far.

[Daham2000]

Hi, @codecapitano

Have you tried with a ReactJS typescript app?

[codecapitano]

The Demo is a TS React App

[Daham2000]

What is the React version and Typescript version of your Demo react app?

[codecapitano]

What is the React version and Typescript version of your Demo react app?

You'll find everything in the demo repository.

[adam-revnt]

I got a couple other type errors on top what the OP encountered...

Error: node_modules/web-vitals/dist/modules/types/fcp.d.ts:34:16 - error TS2304: Cannot find name 'PerformancePaintTiming'.

34     fcpEntry?: PerformancePaintTiming;

Error: node_modules/@grafana/faro-core/dist/types/utils/baseObject.d.ts:5:6 - error TS1337: An index signature parameter type cannot be a union type. Consider using a mapped object type instead.

5     [key: BaseObjectKey]: BaseObjectValue;
       ~~~

[matiduck]

I got a couple other type errors on top what the OP encountered...

Error: node_modules/web-vitals/dist/modules/types/fcp.d.ts:34:16 - error TS2304: Cannot find name 'PerformancePaintTiming'.

34     fcpEntry?: PerformancePaintTiming;

Error: node_modules/@grafana/faro-core/dist/types/utils/baseObject.d.ts:5:6 - error TS1337: An index signature parameter type cannot be a union type. Consider using a mapped object type instead.

5     [key: BaseObjectKey]: BaseObjectValue;
       ~~~

I get exactly the same error when trying to set Angular app:
Node version: 14.17.5
Angular version: 12.2.10
typescript: 4.3.5

[codecapitano]

Hi @matiduck @adam-revnt @Daham2000

The error message is coming from the web-vitals package (PerformancePaintTiming is not found).

I searched a bit around and found this issue in the web-vitals repo.
The problem occurs for older Typescript versions, this also affects older Angular versions which reference older TS versions.

Let me quote the answer from above issue, which also mentions some ways to solve the problem.

The PerformancePaintTiming interface has been included in Typescript for several versions now. I assume that since you're using an older version of Angular, you're fixed to a specific version that does not include this type.

If upgrading Angular isn't an option, I'd recommend maintaining a separate "types" file in your app the includes types for any platform features not included in the version of Typescript that you're using. Once you're able to upgrade Typescript then you can remove the entries in that file.

For example, you can see the type definitions for PerformancePaintTiming here:
https://github.com/microsoft/TypeScript/blob/v4.7.4/lib/lib.dom.d.ts#L10672-L10678

Look like the the PerformancePaintTiming interface has been added with TypeScript version 4.4.

Cheers,
Marco

cc @cedricziel

[gnvcor]

@Daham2000 as you indicated, the error occurs here node_modules/@opentelemetry/sdk-metrics/build/src/aggregator/exponential-histogram/mapping/types.d.ts:11:5, when typing the getter.

Typing the getter is supported in TypeScript from version 4.3 and higher https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-3.html.

The problem is that your version of TypeScript < 4.3.