[BUG] Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin'

[slavanga]

A type error similar to issue microsoft/ApplicationInsights-JS#1324 has appeared in the latest versions:
Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin'.

Versions:

• @microsoft/applicationinsights-react-js v3.4.0
• @microsoft/applicationinsights-web v2.8.9

Here's the simplified example from my next.js app:

import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import {
  ApplicationInsights,
  ITelemetryPlugin,
} from '@microsoft/applicationinsights-web';

const appInsights = new ApplicationInsights({
  config: {
    connectionString: `InstrumentationKey=${process.env.AZURE_INSTURMENTATION_KEY};IngestionEndpoint=https://switzerlandnorth-0.in.applicationinsights.azure.com/;LiveEndpoint=https://switzerlandnorth.livediagnostics.monitor.azure.com/`,
    enableAutoRouteTracking: true,
    extensions: [new ReactPlugin()], // <- error happens here
  },
});

[MSNev]

@Karlie-777 can you have a look at this please, the only change that I'm seeing to the interface is the optional core, which should not cause this issue.

It may be some combination of tsconfig.json settings (ie. strict etc).

[slavanga]

Here's my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

[Karlie-777]

@slavanga just want to double confirm that the error happened when you are using React Plugin not ReactNative Plugin right? it seems that in your config, React plugin is used and the error is ReactNativePlugin related

[slavanga]

@Karlie-777 I just checked again and the error is indeed about React Plugin:
Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin'.

Title and original message updated.

[Karlie-777]

@slavanga try to add "allowSyntheticDefaultImports": true, in tsconfig.json

[slavanga]

@Karlie-777 Adding the option in tsconfig.json did not solve the issue.

[KuSh]

Confirming.

@microsoft/applicationinsights-react-js 3.4.0 depends on @microsoft/applicationinsights-core-js 2.8.5
@microsoft/applicationinsights-web 2.8.9 depends on @microsoft/applicationinsights-core-js 2.8.9

Both versions of @microsoft/applicationinsights-core-js are incompatible on TelemetryUnloadReason type

[...]
Types of property 'reason' are incompatible.
  Type 'import("./node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/JavaScriptSDK.Enums/TelemetryUnloadReason").TelemetryUnloadReason' is not assignable to type 'import("./node_modules/@microsoft/applicationinsights-core-js/types/JavaScriptSDK.Enums/TelemetryUnloadReason").TelemetryUnloadReason'.

Using @microsoft/applicationinsights-react-js 3.4.0 with @microsoft/applicationinsights-web 2.8.5 works
Using an override (or resolution) to use @microsoft/applicationinsights-* 2.8.9 everywhere also fixes the problem

regards,
Nicolas

[Karlie-777]

@slavanga @KuSh the web 2.8.9 and plugin 3.4.0 should work since core dependencies should be compatible with each other. do you mind sharing your package.json and package-lock.json?

[MSNev]

Both versions of @microsoft/applicationinsights-core-js are incompatible on TelemetryUnloadReason type

Now that is "really" weird as the last change to this enum was on Mar 31st, 2022 which was released with 2.8.0...
Likewise with the ITelemetryUloadState interface.

This sounds like typescript not sorting out that the TelemetryUnloadReason is a const enum (and therefore just a number),
which I believe is what skipLibCheck in the tsconfig.json was "supposed to" help solve.

Which versions of typescript are you all using?

[MSNev]

See microsoft/ApplicationInsights-JS#1837 for previous suggestions on this.

[slavanga]

@MSNev Changing the settings skipLibCheck and isolatedModules has no effect. I'm using the latest typescript version (v4.9.4).

[KuSh]

Which versions of typescript are you all using?

Tested with 4.6.2 and 4.9.4. I can't share my package.json and lock as is. I'll try to find a minimal reproduction case.