[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.

[MSNev]

I think #31 will fix resolve the type error which is cause (I believe) because of an optional change we made to a base interface.
The PR just bumps the expected base version of the React-JS plugin to the current version.

As we are planning to release 2.8.10 shortly (next week), there will be an additional bump to 2.8.10 before we release an updated version of this plugin (which should also be next week)

[daenielt]

Hi, I'm currently still facing the same error with the version below. I have tried the solution provided above but still not able to resolve.

• "@microsoft/applicationinsights-react-js": "3.4.1"
• "@microsoft/applicationinsights-web": "2.8.10"
• "typescript": "4.4.3"

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

const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: ConfigEnv.instrumentationKey,
    extensions: [reactPlugin], <--- Error
    enableAutoRouteTracking: true,
  },
});

The error I get:

Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin'.
Types of property 'setNextPlugin' are incompatible.

[Hmoulvad]

How far are we on this topic? There was just released new versions the packages without a fix?

"@microsoft/applicationinsights-react-native": "^3.0.2",
"@microsoft/applicationinsights-web": "^3.0.0",

[MSNev]

"@microsoft/applicationinsights-react-native": "^3.0.2", is specifically for v2.x of "@microsoft/applicationinsights-web"

So based on https://github.com/microsoft/applicationinsights-react-js#compatibility-matrix with the matching versions there should not be any issues as far as we are aware.

Additionally, "@microsoft/applicationinsights-web": "^3.0.0", contains breaking changes from "@microsoft/applicationinsights-web": "^2.8.12" and we have not explicitly validated with this version. There are changes in relation to the interfaces which could cause typing issues, but (in theory) v3.x is compatible (once you ignore typing issues and it's not relying on removed helpers -- maybe... (being very non-commital as it's not a supported scenario that we can currently cover))

We plan to release additional versions of "@microsoft/applicationinsights-react-native": with new versions based on this discussion around the May timeframe as we are now continuing to upgrade our (currently) non-public components to the new v3.x verison of ApplicationInsights.

[MSNev]

Ok, the above triggered a memory and I've just applied the same work-around we had to do for the CI pipeline. I've kicked off the nightly build job so it should produce something in the next hour or so -- we still need to "fix" the setVersion script though.

[MSNev]

😢 The "workaround" didn't work so needs more investigation

[LuwkasLima]

Not to cause too much spam, but facing the issue on NextJS FE:

/@microsoft/applicationinsights-react-js - v3.4.3
/@microsoft/applicationinsights-web - v3.0.1

tsconfig:

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

[YairoR]

Hi, I'm facing the same issue.

I'm using the following:
"@microsoft/applicationinsights-react-js": "^3.4.3",
"@microsoft/applicationinsights-web": "^3.0.2",

But getting the following error:
Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin'.
Types of property 'setNextPlugin' are incompatible.
Type '(next: import("/.../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/JavaScriptSDK.Interfaces/ITelemetryPlugin").ITelemetryPlugin | import("/.../node_modules...' is not assignable to type '(next: import("/.../node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("/.../node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-c...'.

[sarahannnicholson]

I can confirm that down-grading to ApplicationInsights v2.8.12 has sorted the build errors:

"@microsoft/applicationinsights-react-js": "^3.4.2",
"@microsoft/applicationinsights-web": "^2.8.12",

This fixed the issue for me

Unfortunately, doesn't work anymore with Typescript v5.0

[MSNev]

We should be releasing an updated version of this plugin (which will call v17 -- to align with the major version number of React) with full support for AI v3.x (which should (hopefully) resolve these specific issues -- although we have not performed any TS 5.x tests) -- probably by the end of next week (if not before)

[AbhayPrathap]

May i know is there any recent update on this ?

[MSNev]

We are planning on creating these releases this week.

[GuiGimenez]

try
extensions: [reactPlugin as any],

[muchai-mercy]

Any updates on this issue and the releases for it? @MSNev @siyuniu-ms

[siyuniu-ms]

@muchai-mercy The issue is caused because we're using Application Insights JS as a dependency and there is some type conflicts caused by that. We'll wait until the AI JS v3.0.3 is updated, planned for next week. Once that update is done, this issue will be unblocked and fixed.

[siyuniu-ms]

fixed at #57

[jarosik10]

@siyuniu-ms I have applicationinsights-react-js": "17.0.3", applicationinsights-web": "3.0.7" and the issue still exists.

[daggmano]

Confirmed (broken) on @microsoft/applicationinsights-react-js: 17.0.3, @microsoft/applicationinsights-web: 3.0.8. Interestingly, I didn't get this with 17.0.3 / 3.0.7. Reverting back to 3.0.7 builds correctly. NGL, I hate these issues...

[siyuniu-ms]

Thanks @jarosik10 and @daggmano for bring it up. We are making a fix for it in our next release which I believe will help solve the problem from the root. A potential workaround could be to set skipLibCheck to be true in the config.

[daggmano]

Just got the update for applicationinsights-react-js to 17.0.4, and with applicationinsights-web 3.0.8, everything is gold! Thanks so much.

[p-hlp]

@siyuniu-ms @MSNev we received the @microsoft/applicationinsights-web updated from 3.1.0 to 3.1.1 and our builds/tests are failing with:

TS2322: Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin'
Types of property 'setNextPlugin' are incompatible.

again.

Works:

    "@microsoft/applicationinsights-react-js": "17.1.0",
    "@microsoft/applicationinsights-web": "3.1.0",

Doesn't work:

    "@microsoft/applicationinsights-react-js": "17.1.0",
    "@microsoft/applicationinsights-web": "3.1.1",

TypeScript version is 5.3.3.

[siyuniu-ms]

Hi, thanks for the info.

We have not updated the React dependency on Application Insights to version 3.1.1, and that could be causing the type problem. The error should go away after we release version 17.1.1.

We are also working on solving the root cause of the problem. In the meantime, please continue using the same minor version to avoid the type error. Thanks.

[MSNev]

@siyuniu-ms can you please create the release updating this -- these are annoying as they are now always referencing the same packages (no longer embedding them).

We will also need to investigate further, as these are purely TypeScript complaining, as functionally they are compatible.

[p-hlp]

Hi, thanks for the info.

We have not updated the React dependency on Application Insights to version 3.1.1, and that could be causing the type problem. The error should go away after we release version 17.1.1.

We are also working on solving the root cause of the problem. In the meantime, please continue using the same minor version to avoid the type error. Thanks.

Appreciate the reply. Don't have an issue with waiting :). Was just a bit confused because the compatibility matrix says 17.1.0 is compatible with ^3.1.0, so I'd expect 3.1.1 to work fine.

[siyuniu-ms]

@p-hlp Hi, 17.1.1 is now publish.