attribution typescript error about web-vitals HOT 13 CLOSED

It looks like src/attribution/onCLS.ts specifically had an incorrect type which fixes the onCLS((x) => { x.attribution; }); issue.

But a bigger fix was also needed for all the metrics for a onCLS(callAFunction) call.

from web-vitals.

I can't repeat this. Can you give steps as to how you are seeing this?

from web-vitals.

Oh I can repeat this when adding a file directly to the src directory. You should be importing the built files not the source files.

from web-vitals.

I'm also running into this problem. Reduced test case:

import * as WebVitals from 'web-vitals/attribution';
WebVitals.onCLS((x) => {
  /*
  Property 'attribution' does not exist on type 'CLSMetricWithAttribution | CLSMetric | Metric'.
    Property 'attribution' does not exist on type 'CLSMetric'.
  */
  x.attribution;
});

The problematic code is here:

We need to remove extends CLSReportCallback, otherwise TypeScript will create a union of functions. Reduced test case to illustrate this:

interface A {
  (x: { a: number }): void;
}
interface B extends A {
  (x: { b: number }): void;
}
const foo: B = (param) => {
  param;
  // { a: number; } | { b: number; }
};

from web-vitals.

But CLSReportCallbackWithAttribution does extend CLSReportCallback - it doesn't redefine all the properties defined in CLSReportCallback. Without that extends we miss these :

Or we could repeat them in CLSReportCallbackWithAttribution but seems less than ideal.

The below works to remove the error:

import {
  onCLS,
  onFCP,
  onFID,
  onLCP,
  onTTFB,
  onINP,
} from 'web-vitals/attribution';

from web-vitals.

Actually corrected the above, and this is also noted in the README:

To load the "attribution" build, change any import statements that reference web-vitals to web-vitals/attribution:

- import {onLCP, onFID, onCLS} from 'web-vitals';
+ import {onLCP, onFID, onCLS} from 'web-vitals/attribution';

from web-vitals.

The below works to remove the error:

Unfortunately that doesn't help:

import { onCLS } from 'web-vitals/attribution';
onCLS((x) => {
  /*
  Property 'attribution' does not exist on type 'CLSMetricWithAttribution | CLSMetric | Metric'.
    Property 'attribution' does not exist on type 'CLSMetric'.
  */
  x.attribution;
});

from web-vitals.

Without that extends we miss these :

I think those properties will still exist, because they come from a different extends (CLSMetricWithAttribution extends CLSMetric).

from web-vitals.

No that doesn't seem to work as it fails to build:

src/attribution/onCLS.ts:42:10 - error TS2352: Conversion of type 'CLSMetric' to type 'CLSMetricWithAttribution' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Property 'attribution' is missing in type 'CLSMetric' but required in type 'CLSMetricWithAttribution'.

42         (metric as CLSMetricWithAttribution).attribution = {
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/types/cls.ts:73:3
    73   attribution: CLSAttribution;
         ~~~~~~~~~~~
    'attribution' is declared here.

Hmmm not sure what is going on here.

BTW this does work, but seems a little messy:

import { onCLS } from 'web-vitals/dist/web-vitals.attribution';

I don't know why this doesn't as it's basically the same thing:

import { onCLS } from 'web-vitals/attribution';

from web-vitals.

BTW this does work, but seems a little messy:

import { onCLS } from 'web-vitals/dist/web-vitals.attribution';

That doesn't work for me:

Could not find a declaration file for module 'web-vitals/dist/web-vitals.attribution'.

I'm testing this in a fresh project.

No that doesn't seem to work as it fails to build:

On main, I applied this patch and npm run build:ts completes successfully:

diff --git a/src/attribution/onCLS.ts b/src/attribution/onCLS.ts
index 0e62a7d..2aa951a 100644
--- a/src/attribution/onCLS.ts
+++ b/src/attribution/onCLS.ts
@@ -83,7 +83,7 @@ export const onCLS = (
   unattributedOnCLS(
     ((metric: CLSMetric) => {
       attributeCLS(metric);
-      onReport(metric);
+      onReport(metric as CLSMetricWithAttribution);
     }) as CLSReportCallback,
     opts
   );
diff --git a/src/types/cls.ts b/src/types/cls.ts
index 58dbce3..11ec632 100644
--- a/src/types/cls.ts
+++ b/src/types/cls.ts
@@ -83,6 +83,6 @@ export interface CLSReportCallback extends ReportCallback {
 /**
  * A CLS-specific version of the ReportCallback function with attribution.
  */
-export interface CLSReportCallbackWithAttribution extends CLSReportCallback {
+export interface CLSReportCallbackWithAttribution {
   (metric: CLSMetricWithAttribution): void;
 }

I'm not sure if the type assertion is safe though.

from web-vitals.

#348 seems to fix it in a better way I think. You can test it with: npm install web-vitals@next

from web-vitals.

Amazing, thank you!

from web-vitals.

Note: I upgraded to 3.3.2 but I'm still facing type errors. See #351.

from web-vitals.