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

Description/Screenshot

With these versions:

@microsoft/applicationinsights-react-js v17.1.2 @microsoft/applicationinsights-web v3.2.0

I am getting the error:

Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin'.

Similar to https://github.com/microsoft/applicationinsights-react-js/issues/32 but for newer versions.

Steps to Reproduce

Sample code:

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

const reactPlugin = new ReactPlugin()
const applicationInsights = new ApplicationInsights({
  config: {
    extensions: [reactPlugin]
  }
})

Hello @edwiles! We've just published version 17.2.0 of our software, which is now aligned with the latest version (v3.2.0) of Microsoft's Application Insights for web applications. Could you update the @microsoft/applicationinsights-react-js package to the latest version and seeing if the previous issues still persist?

@siyuniu-ms I can confirm this is no longer an issue.

@siyuniu-ms similarly we've updated to 17.2.0 and also applicationinsights-web 3.2.1, and the issue has gone. Many thanks!

Hi :)

Having

    "@microsoft/applicationinsights-react-js": "17.2.0",
    "@microsoft/applicationinsights-web": "3.2.1",

resolves the issue, however if we switch to

    "@microsoft/applicationinsights-react-js": "17.2.0",
    "@microsoft/applicationinsights-web": "3.2.2",

the problem is back

Due to how the packages are structured, every patch release of @microsoft/applicationinsights-web has been a breaking change when the package is used with @microsoft/applicationinsights-react-js because the types are incompatible.

As long as users explicitly need to add both packages to the package.json file, using the latest version of both packages won't work until @microsoft/applicationinsights-react-js is updated. For new users it's obviously confusing if they were to install the latest version of both packages, and then discover that they are incompatible (like they are right now). The compatibility matrix helps a little, but it really just highlights how many incompatible versions there are.

This would be solved if Microsoft would either:

Provide synchronized versions of @microsoft/applicationinsights-react-js and @microsoft/applicationinsights-web (preferably with synchronized version numbers). This is commonly done when multiple packages are released from the same monorepo, so it may be harder to do here (although Rush, developed by Microsoft and used in this repo, advocates for doing it this way...).
Re-export everything from @microsoft/applicationinsights-web in @microsoft/applicationinsights-react-js. This would allow users to replace the following code (example):

import {
    ApplicationInsights,
    type ICfgSyncConfig, // random type from appinsights package
} from "@microsoft/applicationinsights-web";
import { ReactPlugin } from "@microsoft/applicationinsights-react-js";

with

import {
    ApplicationInsights,
    type ICfgSyncConfig, // random type from appinsights package
    ReactPlugin,
} from "@microsoft/applicationinsights-react-js";

And there would only ever be one dependency where everything is internally compatible.

For this use case it wouldn't even be a breaking change because users would still be able to use the old way of importing even after the additional exports were added to @microsoft/applicationinsights-react-js.

Thank you for your thorough investigation. Our team is aware of this issue and is actively looking into it. While our bandwidth is currently limited, we are committed to identifying and addressing the root cause of the problem as soon as possible. We are specifically working on a solution to avoid re-export issues, as the type definitions haven't changed between different versions of application-insights-web. We are still investigating why the type error is occurring.

Provide synchronized versions

yeah, this is how we have been "solving" the issue in a band aid fashion, but as (mostly) we don't change the basic interfaces (so they are normally always the same -- even though TS considers them to be different) this can be overkill, especially when we release simply bug fixes for a core component that is not used / consumed by this one.
For example the change between 3.2.1 and 3.2.2 is related only to the channel interfaces (which this package doesn't reference), the rest of the types (should -- @siyuniu-ms to confirm from investigation) did not change.
From a runtime perspective we provide backward compatibility, so a newer version of AI-web will work with an older extension (version of this package)... So it is just a TypeScript compile time issue -- not a runtime one (which is why we often suggest using the skipLibCheck config (as a work around when this occurs))

Re-export everything from @microsoft/applicationinsights-web in @microsoft/applicationinsights-react-js. This would allow users to replace the following code (example):

We actually use to do this, but it also caused similar issues (previously) as consumers where using their own AI version with this extension, so we moved to make it a dependency to avoid the previous issue -- so I would not want to go back to that scenario (which it would solve the issue for single package consumers, it would not solve for everyone).
ie. By including them within this package even when considered the same type (we exported from a combined types.d.ts) TS complained about them being different even when referencing the same versions (internal and external) -- not always as it also depended on a combination of the version of TypeScript used and the tsconfig.json settings.

Moving forward we are aware that the next version of AI-web (which will be 4.3.0) WILL cause issues and WILL require a new version of every package as we WILL be changing the core IConfiguration / IConfig (to support asynchronous initialization (Promise's) for the connectionString, instrumentationKey and endpointUrl -- while again it will be backward compatible (ie. it will "run"), TypeScript IS going to complain.

For example the change between 3.2.1 and 3.2.2 is related only to the channel interfaces (which this package doesn't reference), the rest of the types (should -- @siyuniu-ms to confirm from investigation) did not change.

Hi, just confirmed there is no file difference between react-appinsights/node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js and react-appinsights/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js

so a newer version of AI-web will work with an older extension (version of this package)... So it is just a TypeScript compile time issue -- not a runtime one

And yes, if using npm run dev, the app could work well while running npm run build will show the type error.

@szymon-pitula @Mathias-S

Could you delete the node_modules folder and reinstall the packages using the ^ symbol for both versions? For example:

 "@microsoft/applicationinsights-react-js": "^17.2.0",
 "@microsoft/applicationinsights-web": "^3.2.2",

This should work based on our local tests.

Explanation: After investigating, I discovered that the bug might be caused by different versions of @microsoft/applicationinsights-core-js being downloaded. Here’s what happens:

@microsoft/applicationinsights-react-js: "^17.2.0" will initially download and link to @microsoft/applicationinsights-core-js 3.2.0. @microsoft/applicationinsights-web: "^3.2.0" will also initially download @microsoft/applicationinsights-core-js 3.2.0.

If we then publish @microsoft/applicationinsights-web 3.2.2:

The package system will download @microsoft/applicationinsights-web 3.2.2 along with @microsoft/applicationinsights-core-js 3.2.2.

However, the react-js package will still point to @microsoft/applicationinsights-core-js 3.2.0, causing a version mismatch.

To resolve this problem, we need to recheck the package links. If you are using Rush, you can do this by running: rush update --full --purge --recheck Check the doc here: https://rushjs.io/pages/commands/rush_update/

Note: We published v3.3.0 of @microsoft/applicationinsights-web yesterday and we are planning on publishing a compatible version of the react-js component today as 17.3.0

When I updated @microsoft/applicationinsights-web to v3.3.1 with v17.3.0, I am getting the same ITelemetryPlugin error. I'm keeping to v3.3.0 for now, which works. To fix the issue, I think the react plugin needs updated again? (Bigger question is why is applicationisights-web updating the patch version for clearly breaking API changes).

When I updated @microsoft/applicationinsights-web to v3.3.1 with v17.3.0, I am getting the same ITelemetryPlugin error. I'm keeping to v3.3.0 for now, which works. To fix the issue, I think the react plugin needs updated again? (Bigger question is why is applicatinos-web using patch version updates for clearly breaking API changes).

Did or can you try performing a full clean / reinstall of the packages after updating the package.json? We have found locally that when this occurs npm (in our case) was not always "updating" to the same version of applicationinsights-web (so it had mixed versions), and after perfoming a full clean git clean -xdf (make sure you have any "new" files staged) and then installing all dependencies resolved the issue.

Fresh installing didn't work for me.... I'm getting the problem locally. In addition, my CI/CD is installing fresh every time, and it is getting the error.

If you're interested in the error (and want to peak at my filenames...):

TS2322: Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin'.
  Types of property 'setNextPlugin' are incompatible.
    Type '(next: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsig...' is not assignable to type '(next: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITele...'.
      Types of parameters 'next' and 'next' are incompatible.
        Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPl...' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-rea...'.
          Type 'ITelemetryPlugin' is not assignable to type 'ITelemetryPlugin | ITelemetryPluginChain'.
            Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin'.
              Types of property 'setNextPlugin' are incompatible.
                Type '((next: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITel...' is not assignable to type '((next: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsi...'.
                  Type '(next: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITele...' is not assignable to type '(next: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsig...'.
                    Types of parameters 'next' and 'next' are incompatible.
                      Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-rea...' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPl...'.
                        Type 'ITelemetryPlugin' is not assignable to type 'ITelemetryPlugin | ITelemetryPluginChain'.
                          Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin'.
                            Types of property 'processTelemetry' are incompatible.
                              Type '(env: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryItem, itemCtx?: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicatio...' is not assignable to type '(env: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryItem, itemCtx?: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js")...'.
                                Types of parameters 'itemCtx' and 'itemCtx' are incompatible.
                                  Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryContext | undefined' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryContext | undefined'.
                                    Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryContext' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryContext'.
                                      Types of property 'createNew' are incompatible.
                                        Type '(plugins?: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPluginChain | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-j...' is not assignable to type '(plugins?: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPluginChain | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applica...'.
                                          Types of parameters 'plugins' and 'plugins' are incompatible.
                                            Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPluginChain | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsight...' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPluginChain | import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IPlugin...'.
                                              Type 'ITelemetryPluginChain' is not assignable to type 'ITelemetryPluginChain | IPlugin[] | undefined'.
                                                Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPluginChain' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPluginChain'.
                                                  Types of property 'unload' are incompatible.
                                                    Type '((unloadCtx: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryUnloadContext, unloadState: import("C:/projects/brand-vision/src/BrandVision.React/node_mod...' is not assignable to type '((unloadCtx: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryUnloadContext, unloadState: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/app...'.
                                                      Type '(unloadCtx: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryUnloadContext, unloadState: import("C:/projects/brand-vision/src/BrandVision.React/node_modu...' is not assignable to type '(unloadCtx: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryUnloadContext, unloadState: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/appl...'.
                                                        Types of parameters 'unloadCtx' and 'unloadCtx' are incompatible.
                                                          Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryUnloadContext' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryUnloadContext'.
                                                            Types of property 'processNext' are incompatible.
                                                              Type '(unloadState: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryUnloadState) => boolean | void' is not assignable to type '(unloadState: import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryUnloadState) => boolean | void'.
                                                                Types of parameters 'unloadState' and 'unloadState' are incompatible.
                                                                  Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryUnloadState' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryUnloadState'.
                                                                    Types of property 'reason' are incompatible.
                                                                      Type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").TelemetryUnloadReason' is not assignable to type 'import("C:/projects/brand-vision/src/BrandVision.React/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").TelemetryUnloadReason'.

And snippets of the code....

import {ReactPlugin} from '@microsoft/applicationinsights-react-js';
import {ApplicationInsights} from '@microsoft/applicationinsights-web';
// ...
const reactPlugin = new ReactPlugin();
// ...
const appInsights = new ApplicationInsights({
    config: {
        extensions: [reactPlugin, clickPluginInstance]
    },
});

@siyuniu-ms Can you please investigate, and it looks like we are going to have to create a new set of releases 😢 to workaround in the meantime.

If you want, here is an example of my yarn.lock:

"@microsoft/applicationinsights-analytics-js@npm:3.3.1":
  version: 3.3.1
  resolution: "@microsoft/applicationinsights-analytics-js@npm:3.3.1"
  dependencies:
    "@microsoft/applicationinsights-common": "npm:3.3.1"
    "@microsoft/applicationinsights-core-js": "npm:3.3.1"
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/17d83e745800e11ea8ff6279d82e1891b57d13b034b830b1bf660d284fe0e7782c6ac13d0d812ec175cd5ac93e4448ca67d085d06f5db76179c085538d0b6968
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-cfgsync-js@npm:3.3.1":
  version: 3.3.1
  resolution: "@microsoft/applicationinsights-cfgsync-js@npm:3.3.1"
  dependencies:
    "@microsoft/applicationinsights-common": "npm:3.3.1"
    "@microsoft/applicationinsights-core-js": "npm:3.3.1"
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-async": "npm:>= 0.5.2 < 2.x"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/e143eba604ed14fe727f2ff5238b823be8cb9f0b8d5eaa5722fb7d5d1ac3c8fd8a3897e8de44f8bfa1c55bb463000b5c3fa8da8a15aa1e16e041d4cdbc524d6c
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-channel-js@npm:3.3.1":
  version: 3.3.1
  resolution: "@microsoft/applicationinsights-channel-js@npm:3.3.1"
  dependencies:
    "@microsoft/applicationinsights-common": "npm:3.3.1"
    "@microsoft/applicationinsights-core-js": "npm:3.3.1"
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-async": "npm:>= 0.5.2 < 2.x"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/79ac5ea7f7b9ee4061bb407afa5eebbc46173d1105b6e4b707d859878c792dfaec39d9c6e61ff8b1b583b656cd222f28c1ab3a1e493abb4aa3401bde98f96f2c
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-clickanalytics-js@npm:^3.3.1":
  version: 3.3.1
  resolution: "@microsoft/applicationinsights-clickanalytics-js@npm:3.3.1"
  dependencies:
    "@microsoft/applicationinsights-common": "npm:3.3.1"
    "@microsoft/applicationinsights-core-js": "npm:3.3.1"
    "@microsoft/applicationinsights-properties-js": "npm:3.3.1"
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/ec13df4d8927592f9ce2d27d25177dfc6993caf65098edc9d43cfa3068617bbf79fc45ff8d8186e8d687d162f4428ffeb76fcf754de7472c07274b7d46ca8863
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-common@npm:3.3.1":
  version: 3.3.1
  resolution: "@microsoft/applicationinsights-common@npm:3.3.1"
  dependencies:
    "@microsoft/applicationinsights-core-js": "npm:3.3.1"
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/bb70462ed5f956ff8d4f45910f8a0e1e541a5d98140810875d16319ce1fed55ba87fca0a8411e2543a16a6d52e36c3bb33176fd14b3715981801bb392053ad59
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-common@npm:^3.3.0":
  version: 3.3.0
  resolution: "@microsoft/applicationinsights-common@npm:3.3.0"
  dependencies:
    "@microsoft/applicationinsights-core-js": "npm:3.3.0"
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/c125ee0098aff3c3ae0d80842adc3b5801442082af551d34d0bf26e0f452a0d4d30f2ecbee883e44e64f96d7670bc398f45778e19a7eeafba448ec8d100996b0
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-core-js@npm:3.3.0, @microsoft/applicationinsights-core-js@npm:^3.3.0":
  version: 3.3.0
  resolution: "@microsoft/applicationinsights-core-js@npm:3.3.0"
  dependencies:
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-async": "npm:>= 0.5.2 < 2.x"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/411216852d99611f1a8502d04cba25467827128ca83f8f96e0553ff1436cd647447d8bb05cc0e2db4c4f0eb09de002fd8fe9e264536342a7dbe69c3936e64129
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-core-js@npm:3.3.1":
  version: 3.3.1
  resolution: "@microsoft/applicationinsights-core-js@npm:3.3.1"
  dependencies:
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-async": "npm:>= 0.5.2 < 2.x"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/6e72748f8f7a4c9d4521ce53230cc7d449916667f5a9c34a73725de3c1aa829e1053d9c131d73b8aebb72f350c68e8d4c2b7a1537ef2e44d067e833bb14ce357
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-dependencies-js@npm:3.3.1":
  version: 3.3.1
  resolution: "@microsoft/applicationinsights-dependencies-js@npm:3.3.1"
  dependencies:
    "@microsoft/applicationinsights-common": "npm:3.3.1"
    "@microsoft/applicationinsights-core-js": "npm:3.3.1"
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-async": "npm:>= 0.5.2 < 2.x"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/c83f7f50d2040e67f1ff6d775603e2658bf1d9eecb26098328af3b15345db1013e126cc19ec360194e1b09d281dfb7b360a720beb57e2183cd5f8ce814b6336d
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-properties-js@npm:3.3.1":
  version: 3.3.1
  resolution: "@microsoft/applicationinsights-properties-js@npm:3.3.1"
  dependencies:
    "@microsoft/applicationinsights-common": "npm:3.3.1"
    "@microsoft/applicationinsights-core-js": "npm:3.3.1"
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/423a1914b1d1f46623aa75139618ae652e8bf08edb4262f9f5f30b3fb2fadd86deb0da55c9c207367054bd7f1db680124d2948326b667419eec60439c3ba79a4
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-react-js@npm:^17.3.0":
  version: 17.3.0
  resolution: "@microsoft/applicationinsights-react-js@npm:17.3.0"
  dependencies:
    "@microsoft/applicationinsights-common": "npm:^3.3.0"
    "@microsoft/applicationinsights-core-js": "npm:^3.3.0"
    "@microsoft/applicationinsights-shims": "npm:^3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    history: ">= 4.10.1"
    react: ">= 17.0.1"
    tslib: "*"
  checksum: 10c0/de992bff8b82757b6fa10a6ad7645bd136cd2f660caa274d4fa2dbc50d2ef5edf283c2fd00558aa109b0666598ec2d45e1a3ccd38f94423e558e56221d6e198a
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-shims@npm:3.0.1, @microsoft/applicationinsights-shims@npm:^3.0.1":
  version: 3.0.1
  resolution: "@microsoft/applicationinsights-shims@npm:3.0.1"
  dependencies:
    "@nevware21/ts-utils": "npm:>= 0.9.4 < 2.x"
  checksum: 10c0/3fa11dbbe6c4844fb28aecaef0aa352ace22558e161d27a7ff227060fb07e724fc1a7da449ae01327ff05d416abfff6987019c332f8b956c83a9f38f6b191e60
  languageName: node
  linkType: hard

"@microsoft/applicationinsights-web@npm:^3.3.1":
  version: 3.3.1
  resolution: "@microsoft/applicationinsights-web@npm:3.3.1"
  dependencies:
    "@microsoft/applicationinsights-analytics-js": "npm:3.3.1"
    "@microsoft/applicationinsights-cfgsync-js": "npm:3.3.1"
    "@microsoft/applicationinsights-channel-js": "npm:3.3.1"
    "@microsoft/applicationinsights-common": "npm:3.3.1"
    "@microsoft/applicationinsights-core-js": "npm:3.3.1"
    "@microsoft/applicationinsights-dependencies-js": "npm:3.3.1"
    "@microsoft/applicationinsights-properties-js": "npm:3.3.1"
    "@microsoft/applicationinsights-shims": "npm:3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-async": "npm:>= 0.5.2 < 2.x"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    tslib: "*"
  checksum: 10c0/765467fd27f06956d19ee65bca5e71e2208f21eb6398e542ddb1a56f26883085b612564900e52f672f5ed43c5826a2e9a740699c04e7fc42fe689c4bc1fd762f
  languageName: node
  linkType: hard

@epicstar

"@microsoft/applicationinsights-common@npm:3.3.1": version: 3.3.1 resolution: "@microsoft/applicationinsights-common@npm:3.3.1" dependencies: "@microsoft/applicationinsights-core-js": "npm:3.3.1"

"@microsoft/applicationinsights-common@npm:^3.3.0": version: 3.3.0 resolution: "@microsoft/applicationinsights-common@npm:3.3.0" dependencies: "@microsoft/applicationinsights-core-js": "npm:3.3.0"

I reviewed your grunt file and noticed that both @microsoft/applicationinsights-common@npm:^3.3.0 and 3.3.1 versions are present. This can lead to a type error because the version of node_modules/@microsoft/applicationinsights-core-js may differ from node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js, which seems to be causing the issue in your error code.

I tested this locally by modifying the version in our sample app's https://github.com/microsoft/applicationinsights-react-js/blob/fa7a838dab84037e02609bd42ba881ecc6afb4fb/sample/applicationinsights-react-sample/package.json#L10 to 3.3.1. After running npm install --update and npm run build, the application worked correctly.

Could you please verify that in your app's node_modules/@microsoft folder, both applicationinsights-common and applicationinsights-core are at version 3.3.1 and ensure that there are no 3.3.0 folders present?

Hello @siyuniu-ms,

Because of your help, I did get it fixed.

I didn't quite get the build to work using your instructions with the yarn equivalent (yarn up @microsoft/applicationinsights-web (actually, a 3rd party version of dependabot in Azure Devops made the original @microsoft/applicationinsights-web update....). However, this is what I did instead:

yarn up --recursive @microsoft/applicationinsights-core-js
yarn up --recursive @microsoft/applicationisights-common

This resulted in this change in my yarn.lock:

Keep note, the yarn.lock entry of @microsoft/applicationinsights-react-plugin looks like this still:

"@microsoft/applicationinsights-react-js@npm:^17.3.0":
  version: 17.3.0
  resolution: "@microsoft/applicationinsights-react-js@npm:17.3.0"
  dependencies:
    "@microsoft/applicationinsights-common": "npm:^3.3.0"
    "@microsoft/applicationinsights-core-js": "npm:^3.3.0"
    "@microsoft/applicationinsights-shims": "npm:^3.0.1"
    "@microsoft/dynamicproto-js": "npm:^2.0.3"
    "@nevware21/ts-utils": "npm:>= 0.11.3 < 2.x"
  peerDependencies:
    history: ">= 4.10.1"
    react: ">= 17.0.1"
    tslib: "*"
  checksum: 10c0/de992bff8b82757b6fa10a6ad7645bd136cd2f660caa274d4fa2dbc50d2ef5edf283c2fd00558aa109b0666598ec2d45e1a3ccd38f94423e558e56221d6e198a
  languageName: node
  linkType: hard

Because of the yarn up --recursive command, @microsoft/applicationinsights-core-js:^3.3.0 now resolves to version v3.3.1.

Your pointers helped me figure out which transitive dependencies needed updated, so I thank you.

I was wondering if something should be done in case anybody else comes across this problem? To my mind, the only things that I can think of are:

Make an update to the package so npm and yarn will resolve the correct transitive dependencies without any tricks, or just document
Some sort of documentation to fix the issue on the consumer's side?

Hi @epicstar , thanks for the suggestion. I've created some doc: https://github.com/microsoft/ApplicationInsights-JS/pull/2395 https://github.com/microsoft/applicationinsights-react-js/pull/107 We would like to hear your feedback regarding these documents.

Due to how the packages are structured, every patch release of @microsoft/applicationinsights-web has been a breaking change when the package is used with @microsoft/applicationinsights-react-js because the types are incompatible.

As long as users explicitly need to add both packages to the package.json file, using the latest version of both packages won't work until @microsoft/applicationinsights-react-js is updated. For new users it's obviously confusing if they were to install the latest version of both packages, and then discover that they are incompatible (like they are right now). The compatibility matrix helps a little, but it really just highlights how many incompatible versions there are.

This would be solved if Microsoft would either:

Provide synchronized versions of @microsoft/applicationinsights-react-js and @microsoft/applicationinsights-web (preferably with synchronized version numbers). This is commonly done when multiple packages are released from the same monorepo, so it may be harder to do here (although Rush, developed by Microsoft and used in this repo, advocates for doing it this way...).

Re-export everything from @microsoft/applicationinsights-web in @microsoft/applicationinsights-react-js. This would allow users to replace the following code (example):
import {
    ApplicationInsights,
    type ICfgSyncConfig, // random type from appinsights package
} from "@microsoft/applicationinsights-web";
import { ReactPlugin } from "@microsoft/applicationinsights-react-js";
with
import {
    ApplicationInsights,
    type ICfgSyncConfig, // random type from appinsights package
    ReactPlugin,
} from "@microsoft/applicationinsights-react-js";
And there would only ever be one dependency where everything is internally compatible.

For this use case it wouldn't even be a breaking change because users would still be able to use the old way of importing even after the additional exports were added to @microsoft/applicationinsights-react-js.

So basically for every new version ApplicationInsights-JS launches we can only update if applicationinsights-react-js is updated as well?

So basically for every new version ApplicationInsights-JS launches we can only update if applicationinsights-react-js is updated as well?

~~Yes, but only if type definitions have changed in @microsoft/applicationinsights-web~~.

Right now, there is no updated version of @microsoft/applicationinsights-react-js that matches the types of @microsoft/applicationinsights-web, so you need to wait for a release before updating both simultaneously.

Edit: I was wrong about the latest release, see replies below

@lapa182 @Mathias-S No, the type didn't change (if it change, we will do a quick update for react package and release a note). For the normal update, you don't need to wait until new react-js version to be published. The only thing you need to do is to make sure when @microsoft/applicationinsights-web version is updated by your npm package tool automatically, the @microsoft/applicationinsights-web package that is rooted inside @microsoft/applicationinsights-react-js is also being updated. Check this doc: https://github.com/microsoft/ApplicationInsights-JS/pull/2395/files?short_path=9b91f47#diff-9b91f47caa16e1572fd475b84bd088752ded536846242f98b7e474d878d0bdd2

Just for reference on why

Provide synchronized versions of @microsoft/applicationinsights-react-js and @microsoft/applicationinsights-web (preferably with synchronized version numbers). This is commonly done when multiple packages are released from the same monorepo, so it may be harder to do here (although Rush, developed by Microsoft and used in this repo, advocates for doing it this way...).

We explicitly moved the framework components out of the ApplicationInsights-JS mono-repo so that we could "support" updating multiple versions of each framework within their own repos' as we had many requests for supporting different (mostlyt the "latest") versions of react iwith the current version of AI. Which rush doesn't "like" having multiple versions cross linked within the same mono-repo. This is also why we moved from a pinned model (from the mono-repo) to the range (so we didn't "have" to release a new version of every framework version for every release..

Re-export everything from @microsoft/applicationinsights-web in @microsoft/applicationinsights-react-js. This would allow users to replace the following code (example):

This is sort of a different model from what we have as this component is an "add-on", the proposal above would turn this "extension" into a fully blown (what we call) SKU (ie. it would become the entire SDK instance (because it includes it)), this would also mean that we would "need" to create a new release for every AI release (just to keep it updated). Again, not the model we are looking to do (as we are a very small team). Additionally, there is a multiple dimensional aspect of Framework (react) updates and AI updates and while we generally release AI on a monthly cycle, there are generally no changes in the react code itself (as most of the time we don't alter the underlying interfaces).

Now, if we were to just re-publish the interfaces (which we use to do), this also causes similar (and worse) issues when the interface definitions are changed and it started to cause this same error (on a different interfaces) almost all of the time, which is why we eventually removed them completely and have them as a dependencies (because even when they are identical, some versions of TypeScript would "see" the same definitions as being different -- just because they are sourced from different packages).

Right now, there is no updated version of @microsoft/applicationinsights-react-js that matches the types of @microsoft/applicationinsights-web, so you need to wait for a release before updating both simultaneously.

Except this also (seems) to be resolvable by ensuring that your local repo updates and synchronizes every component to the same release version (that matches the semver specification ^3.3.0), as we (try) to ensure that we follow this for any known breaking changes (I'll admit that we have not always got this right and have missed some unexpected transitive inclusions)

We now have automated "nightly" builds that try and catch these scenarios, where now whenever there is ANY change to either this component or the core Application Insights SDK a new nightly release is generated (or should be). These work mostly because they are always starting from a completely clean build (new repo clone, npm install, etc) so that all of the dependencies are resolved based on the current semconv resolution. Which also (seems) to validate our assumption above (that ensuring a full sync of the repo dependency update should solve and handle this error)

They are also using the currently checked in (unreleased) code to pick up un-intended breakages as soon as possible, as such they are explicitly NOT a production supported component and are merely for pre-testing fixes and catching unexpected bugs. https://www.npmjs.com/package/@microsoft/applicationinsights-react-js?activeTab=versions

@MSNev Sorry for my incorrect reply about the latest version. But the problem is still that the current release strategy causes problems for app maintainers because no package manager will update @microsoft/applicationinsights-react-js's dependencies when updating @microsoft/applicationinsights-web.

Assuming an app has a version-controlled lockfile (which it should), and has @microsoft/applicationinsights-react-js@17.3.0 and @microsoft/applicationinsights-web@3.3.0 installed, then updating to @microsoft/applicationinsights-web@3.3.1 by using npm install @microsoft/applicationinsights-web@3.3.1 (with or without the version specifier) WILL cause the app to have two different versions of @microsoft/applicationinsights-common and @microsoft/applicationinsights-core-js. This is what causes the type errors people are complaining about here.

The exact same thing happens with other package managers such as pnpm.

It also happens when using automated package dependency updaters such as Renovate bot or Dependabot, which means all PRs from these bots will always fail type checking unless both packages happen to be updated at the same time, and the bot is configured to update them in the same PR.

In all cases, the easiest way for the app maintainer to resolve this specific situation is to uninstall @microsoft/applicationinsights-react-js and then re-install it, because then its dependencies would get resolved to the latest versions. This is only a fix if the user actually has the latest version of applicationinsights-web. If updating between any other older version, the user would have to manually edit the lockfiles. In any case, this moves the burden of keeping transitive dependencies updated on the app developer, which doesn't make much sense. This work is normally done by dependency maintainers, in this case, the maintainers of @microsoft/applicationinsights-react-js.

If this dependency is meant to be used as in conjunction with the main appinsights package, wouldn't it make more sense to use peer dependencies instead of regular dependencies?

If this dependency is meant to be used as in conjunction with the main appinsights package, wouldn't it make more sense to use peer dependencies instead of regular dependencies?

Thank you for the detailed description, while I was reading your response I also started to think that using peer dependencies might be the solution.

@siyuniu-ms Can you please create an internal work item to investigate changing the direct dependencies for theses extensions (react, react-js and angular) along with the examples. And if this works as we suspect then we will create a release with the dependency change.

We should also try to create a "sample" repo that simulate this scenario and add that to the nightly build process (we should be able to have it live in this repo, but just not built by default (so you need to drill into the folder) -- instead of creating a new repo)

Input from anyone else reading this thread would be appreciated, in case we are missing something in relation to this... As I suspect that some consumers of the component (may) not be explicitly including the AI components, so this would be a breaking change for them / you?

I was getting this issue for

    "@microsoft/applicationinsights-react-js": "17.2.0",
    "@microsoft/applicationinsights-web": "3.2.1"

and the below version fixed it for me.

   "@microsoft/applicationinsights-react-js": "17.3.2",
    "@microsoft/applicationinsights-web": "3.3.2"

@siyuniu-ms

the link mentioned in the Readme doesn't work.

Type Error Fixed Guideline

Hi @ordinaryCoder Thanks for pointing out the link problem. It's fixed now.

For the version: "@microsoft/applicationinsights-react-js": "17.2.0", "@microsoft/applicationinsights-web": "3.2.1"
As the current version is 3.3.2, when you run npm update, react-js will pick up 3.3.2 web package as its dependency, which has a conflict with your original given 3.2.1 web package version so this could not work.

If your project needs both @microsoft/applicationinsights-web and @microsoft/applicationinsights-react-js package, I would recommend using ^ so that they could keep align with each other.

microsoft / applicationinsights-react-js

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