-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BUG] Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin' #95
Comments
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
resolves the issue, however if we switch to
the problem is back |
Due to how the packages are structured, every patch release of As long as users explicitly need to add both packages to the This would be solved if Microsoft would either:
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 |
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. |
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 |
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
And yes, if using npm run dev, the app could work well while running npm run build will show the type error. |
Could you delete the node_modules folder and reinstall the packages using the ^ symbol for both versions?
This should work based on our local tests. Explanation: @microsoft/applicationinsights-react-js: "^17.2.0" will initially download and link to @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: |
Note: We published v3.3.0 of |
When I updated |
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 |
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...):
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 |
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 applicationinsights-react-js/sample/applicationinsights-react-sample/package.json Line 10 in fa7a838
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 --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-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 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:
|
Hi @epicstar , thanks for the suggestion. I've created some doc: |
So basically for every new version |
Edit: I was wrong about the latest release, see replies below |
@lapa182 @Mathias-S |
Just for reference on why
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 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). |
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 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 |
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. |
@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 Assuming an app has a version-controlled lockfile (which it should), and has The exact same thing happens with other package managers such as 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 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.
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
and the below version fixed it for me.
the link mentioned in the Readme doesn't work. |
Hi @ordinaryCoder For the version: 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. |
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 #32 but for newer versions.
Steps to Reproduce
Sample code:
The text was updated successfully, but these errors were encountered: