Question

Error when trying to install the session replay plugin

  • 24 June 2024
  • 8 replies
  • 92 views

Hi, I am getting an error when trying to install the session replay plugin for amplitude

The error is as follows: 
 Property 'setup' in type 'SessionReplayPlugin' is not assignable to the same property in base type 'DestinationPlugin<CoreClient, Config>'.
  Type '(config: BrowserConfig, client?: BrowserClient | undefined) => Promise<void>' is not assignable to type '(config: Config, client: CoreClient) => Promise<void>'.
    Types of parameters 'client' and 'client' are incompatible.
      Type 'CoreClient' is missing the following properties from type 'BrowserClient': init, setTransport, getUserId, setUserId, and 6 more.

Versions used"@amplitude/analytics-browser": "^2.8.1","@amplitude/analytics-types": "^2.5.1","@amplitude/plugin-session-replay-browser": "^1.4.1",

8 replies

Badge

Hi @Nikunj Chawla , do you mind showing us the code snippet you used for instrumenting? Thanks! 

Hi @Jackson Huang , this is the code snippet I use to initialize my amplitude instance.
I am currently using this on Angular(v16.2.7).
Any help is appreciated, thanks!

 

import * as amplitude from '@amplitude/analytics-browser';import {sessionReplayPlugin} from '@amplitude/plugin-session-replay-browser';

 

async initialize(userId?: string){  const sessionReplayTracking = sessionReplayPlugin()  await amplitude.add(sessionReplayTracking).promise  amplitude.init(environment.amplitude_api_key, userId, {    defaultTracking: {      sessions: true    }  });}

@Nikunj Chawla I’m wondering if you maybe have had two analytics-types packages installed somehow that are having a conflict with each other. Can you try

```

rm -rf node_modules/

```

and reinstalling your packages via npm or yarn? Then restart your typescript server and see if the error continues

Hey @Kelly Wallach , I did as you asked, removed the extra analytics-types package from the package.json, removed the node_modules  and reinstalled packages using npm. After doing all this I get the same error.

The stack trace says the error is at:
node_modules/@amplitude/plugin-session-replay-browser/lib/esm/session-replay.d.ts:10:5 

 

Userlevel 5
Badge +8
Hi Nikunj,

Let me check on this internally and get back to you!

Best,
Sydney


P.S. Checkout upcoming events and user meetups on our events page.
Userlevel 5
Badge +8
Dear Nikunj,

Our Engineers attempted to replicate this issue locally but was unsuccessful. The root cause appears to be a potential mismatch of data types. As we cannot replicate the issue, we are having a hard time finding the root cause.

One possible workaround could be to utilize a `// @ts-ignore` comment on the lines that are affected. While this does not resolve the issue, it can prevent the TypeScript compiler from triggering a failure.

Would you be open to trying that workaround?

Best,
Sydney


P.S. Checkout upcoming events and user meetups on our events page.

I am facing the same issue when I just add import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'; and build my project.
I believe if you can add // @ts-ignore in your package that would resolve the issue

File: node_modules/@amplitude/plugin-session-replay-browser/lib/esm/session-replay.d.ts
 

import { BrowserClient, BrowserConfig, DestinationPlugin, Event, Result } from '@amplitude/analytics-types';

import { SessionReplayOptions } from './typings/session-replay';

export declare class SessionReplayPlugin implements DestinationPlugin {

name: string;

type: "destination";

clientRemove: BrowserClient['remove'];

config: BrowserConfig;

options: SessionReplayOptions;

constructor(options?: SessionReplayOptions);

// @ts-ignore

setup(config: BrowserConfig, client?: BrowserClient): Promise<void>;

Userlevel 5
Badge +8
Hi Arun,

Thanks for letting us know the workaround did not work let me see if there is a better solution!

Best,
Sydney


P.S. Checkout upcoming events and user meetups on our events page.

Reply