[BUG] Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin' about applicationinsights-react-js HOT 64 OPEN

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

from applicationinsights-react-js.

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",

from applicationinsights-react-js.

@sionjlewis can you check your local lock file the make sure that you are using 2.8.12... As 3.4.2 was built with 2.8.12 as it's dependency.
Also can you provide you tsconfig.json settings

We did release 2.8.13 this week which removes the bundled definitions in the types (see microsoft/ApplicationInsights-JS#2052) and I am planning on release an update to this component to 2.8.13 (to hopefully avoid this issue for later releases -- and not have to release an update every time as that would effectively take us back to pinning the version which we don't want to do)

from applicationinsights-react-js.

try
extensions: [reactPlugin as any],

from applicationinsights-react-js.

@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).

from applicationinsights-react-js.

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)

from applicationinsights-react-js.

I have the same issue upgrading from 3.4.0 to 3.4.2. We use "react": "18.2.0". Tried reinstalling, recompiling and issue still persists. Is it closed or are you working on a fix? I'm confused. Seems to be a breaking change not a patch?

from applicationinsights-react-js.

microsoft/ApplicationInsights-JS#2052

I'll reopen this issue until the above and a perhaps an updated version of this plugin is published

from applicationinsights-react-js.

This is not fixed for:
"@microsoft/applicationinsights-react-js": "^3.4.2",
"@microsoft/applicationinsights-web": "2.8.12",
...

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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

from applicationinsights-react-js.

fixed at #57

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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"]
}

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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.

from applicationinsights-react-js.

Well I have bad news. I just installed both packages while going through a Medium article related to using AppInsights with NextJS https://medium.com/@nirbhayluthra/integrating-azure-application-insights-with-next-js-the-easy-way-afc83596afad

"@microsoft/applicationinsights-react-js": "^3.4.3",
"@microsoft/applicationinsights-web": "^3.0.2",

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

The code can be found in the Medium article as it is identical, except a custom type for the BrowserHistory.

type BrowserHistory = {
    url      : string;
    location : { pathname: string };
    listen   : () => void;
    state?   : { url: string };
};

from applicationinsights-react-js.

Yeh, I had a quick look and the nightly is failing.
As part of the nightly build, we automatically assign the build version as "nightly" with a build number and it's failing when the sample attempts to "resolve" this new name -- so it's probably an issue with our automated version updates.
@siyuniu-ms we can discuss later today.

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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)

from applicationinsights-react-js.

We are planning on creating these releases this week.

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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.

from applicationinsights-react-js.

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.

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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.

from applicationinsights-react-js.

@p-hlp Hi, 17.1.1 is now publish.

from applicationinsights-react-js.

@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

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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

from applicationinsights-react-js.

@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?

from applicationinsights-react-js.

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?

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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.

from applicationinsights-react-js.

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",

from applicationinsights-react-js.

"@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.

from applicationinsights-react-js.

Just quickly looking (not upgrading / compiling) at the source code, In theory, if you "re-compile" the original source code (fixing any import issues -- which there should only be a couple of minor ones (importing from applicationinsights-common) it should work.

from applicationinsights-react-js.

v3.4.2 should work with ApplicationInsights v2.8.12, please check/recreate your package-lock.json as from other reports this seems to be the issue.

We are planning on releasing a version of this extension which is compatible with v3.x of ApplicationInsights during the May'23 timeframe.

from applicationinsights-react-js.

Ok, after a little bit more research I (think) I might have identified a contributing issue which is causing this problem and setting your dependencies to match avoids.

Basically, as part of the types that we are generating and publishing in the packages we are using the api-extractor and with this we have it configured to "include" some of the other bundled packages within the type like this.

While this "generally" works it appears (at least when using Typescript 4.9.5) that if you include individual packages (like Core, common, etc) and even with the same package version that TypeScript sometimes considers the types/interfaces as "different" and will give this error -- even when they are basically type compatible.

I'll raise an issue with ApplicationInsights to remove the bundledPackages from all of the api-extractor.json files so that the next version (2.8.13 and 3.0.1 (hopefully)) won't contribute to this problem -- and (hopefully) it doesn't cause any other typing issues.

from applicationinsights-react-js.

@MSNev

@sionjlewis can you check your local lock file the make sure that you are using 2.8.12... As 3.4.2 was built with 2.8.12 as it's dependency. Also can you provide you tsconfig.json settings

We did release 2.8.13 this week which removes the bundled definitions in the types (see microsoft/ApplicationInsights-JS#2052) and I am planning on release an update to this component to 2.8.13 (to hopefully avoid this issue for later releases -- and not have to release an update every time as that would effectively take us back to pinning the version which we don't want to do)

I am having the same exception for the:

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

lock file definatelly has locked 2.8.12 and 3.4.2

	"node_modules/@microsoft/applicationinsights-web": {
			"version": "2.8.12",

		"node_modules/@microsoft/applicationinsights-react-js": {
			"version": "3.4.2",

Have tried to remove package.lock but this is not solving an issue.

from applicationinsights-react-js.

@MSNev
Fixed when all 3 versions are frozen:

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

from applicationinsights-react-js.

Got it.

We are about to release v3.4.3 which includes several fixes that will hopefully avoid this issue in the future. It includes

• Updated to v2.8.14 of Application Insights which has some specific fixes for this error
• As part of preparing for updating to fully support ApplicationInsights 3.x we have moved 3.4.3 into a release3.x branch and we will be publishing an updated version where we are goign to bump the major version number to match the major version number of React-JS moving forward

from applicationinsights-react-js.

Ok, v3.4.3 is now published which includes changes which should address the underlying issues that were causing this problem.

from applicationinsights-react-js.

sigh - While we have not yet released version an ApplicationInsights compatible version of this plugin, v3.0.3 (of AI) has the same "set" of fixes so it should not be causing this specific issue.

from applicationinsights-react-js.

So the issue should hopefully resolve when v3.0.3 of AI releases? I do not need to implement this right away, so I probably have a week or two until this becomes an issue.

In any case, thank you for the quick answer :)

from applicationinsights-react-js.

Actually, just checked and the fixes were added in 3.0.2 of AI 😢, so because you are still seeing this means that the answer to above is no...

from applicationinsights-react-js.

@siyuniu-ms, As part of the work to upgrading to v3.x of AI (dynamic config support) can you try and repro this issue (v3.4.3 (react) with v3.0.2 (AI)) so that we can try to understand why the existing fixes have not addressed this (ongoing) problem.

from applicationinsights-react-js.

Just tried the above (v3.4.3 (react) with v3.0.2 (AI)) and still getting the same issue 😫

from applicationinsights-react-js.

Can I assume that you don't have skipLibCheck set to true?

from applicationinsights-react-js.

Hi, I am currently working on enabling the dynamic config on PR #49, hope that could solve the problem.

from applicationinsights-react-js.

To add a little more to this, we managed to repo the issue locally as part of creating the upgrade to v3.x (The Dynamic Config mentioned) and identified that this was due to typing differences between v2.x and v3.x. While the code should function TypeScript complains about these (minor) Typing differences.

from applicationinsights-react-js.

The issue should be solved by #49

from applicationinsights-react-js.

Thanks for trying to fix this, it looks like the merge of #49 has caused a build error on main. Could this be re opened?

from applicationinsights-react-js.

@siyuniu-ms can you please investigate.
@henrytoone What is the build error?

from applicationinsights-react-js.

@siyuniu-ms can you please investigate. @henrytoone What is the build error?

https://github.com/microsoft/applicationinsights-react-js/runs/14576935518
It looks like the nightly pipeline - I don't think I have sufficient permissions to view what it is that caused the error

from applicationinsights-react-js.

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.

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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"] }

from applicationinsights-react-js.

May i know is there any recent update on this ?

from applicationinsights-react-js.

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

from applicationinsights-react-js.

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.

from applicationinsights-react-js.