Applicationinsights-js: [BUG] `__extends` not found in

[MichaelBelousov]

Description/Screenshot

Having issues with the esm distribution since yesterday, get the following error stack on load of a production create-react-app build:

ApplicationInsights.js:540 Uncaught ReferenceError: __extends is not defined
    at ApplicationInsights.js:540
    at Object.<anonymous> (ApplicationInsights.js:17)
    at l ((index):1)
    at Object.317 (main.37854ca8.chunk.js:formatted:23035)
    at l ((index):1)
    at Object.23 (main.37854ca8.chunk.js:formatted:22248)
    at l ((index):1)
    at Object.66 (main.37854ca8.chunk.js:formatted:24794)
    at l ((index):1)
    at Object.50 (main.37854ca8.chunk.js:formatted:24026)

__extends not found in production create-react-app with the following imports

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

Tried downgrading by pinning @microsoft/applicationinsights-react-js to 2.5.4 and tslib to 1.11.2,
didn't help. Also haven't been able to reproduce in the local webpack development server, tested 2.5.4, 3.0.0, and tslib 1.3, 1.11.2

[MichaelBelousov]

workaround: also pinning @microsoft/applicationinsights-web to 2.5.4, but I would be interested in getting 3.0.0 to work, and especially figuring out what is probably a local issue in why our bad CI builds weren't reproducible on developer machines.

[MSNev]

As part of 2.5.5 there is a new dependency (which implements the __extends() ) [email protected], is your react app including this as well?

[MichaelBelousov]

not as a direct dependency but, the applicationinsights-shims that I believe you were referring to was a transitive dependency and in our lockfile

[MSNev]

looking at the package.json files I believe we have the ai-shims module as a direct dependency which is probably why your local dev doesn't repro the issue. Sounds like stale resources, npm install (after cleaning packages should fix the issue)

In terms of versioning your packages.json should work with something like (this is a WAG)

"dependencies": {
"@microsoft/applicationinsights-shims": "^1.0.0",
"@microsoft/applicationinsights-react-js": "^3.0.0",
"@microsoft/applicationinsights-web": "^2.5.5"
},

And then perhaps (if your embedding these modules into your own) adding the following to the top of your root module (eg. index.ts)
import '@microsoft/applicationinsights-shims';

This will include (or reuse) the __extends() and __assign() implementations that are now required as we removed our dependency on tslib due to braking compile time issues.

[MSNev]

Followup: If you are using webpack for packaging, it's possible that the chunks it is creating do not include any __assign() or __extends() implementation. In this case you will need to add something like the following to your webpack definition to ensure that it includes the required implementations.

This includes examples of using the ai shims implementation or your tslib version.

config.plugins.push(
  new webpack.ProvidePlugin({
    '__assign': ['@microsoft/applicationinsights-shims', '__assignFn'],
    '__extends': ['@microsoft/applicationinsights-shims', '__extendsFn']
    // '__assign': ['tslib', '__assign'],
    // '__extends': ['tslib', '__extends']
  })

Additional reference on this usage: https://stackoverflow.com/questions/36556772/webpack-and-typescript-extends

[MSNev]

Closing -- assuming the above resolved the issue -- please reopen if it's still occurring.

[sommesh]

Current version:
"@microsoft/applicationinsights-react-js": "^3.1.0",
"@microsoft/applicationinsights-shims": "^2.0.0",
"@microsoft/applicationinsights-web": "^2.6.2",

And added the import in base index
import '@microsoft/applicationinsights-shims';

But still, getting the error:
ReactPlugin.js:7 Uncaught ReferenceError: __extends is not defined
at ReactPlugin.js:7
at Module../node_modules/@microsoft/applicationinsights-react-js/dist-esm/ReactPlugin.js (ReactPlugin.js:87)

Any workaround or fix?

[MSNev]

We have not yet published a react update that uses v2.0.0 of the shims (should be later today), if you check your dependencies you should find that v1.0.3 is currently still getting included.

[MSNev]

PR for bumping versions to consume v2.6.2 and shims v2.0.0 is out #1552
This is required as the components that the released react plugin is using internally still references the 1.0.3 shims, which assumes the global presence of the __extends() and __assign() tslib helpers. While v2.6.2 now replaces (during packaging) the breaking 1.13.0 tslib components (which caused us to create these in the first place)

[MSNev]

React v3.1.1 and ReactNative v2.3.1 are now published to NPM

[phantomcosmonaut]

@MSNev still seeing this error

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

[benrobot]

I too am having this issue. And yes, I did read and try the work arounds listed on #1551, #1527, #1280 and #1269 and they did not work either. Also, #1551 was closed four hours after it was opened without any confirmation that the issue was fixed.

I'm doing a proof of concept for my team as they decided whether or not to begin using Application Insights but 5 separate issues for the same problem, all closed without confirmation make me worry.

Before posting this I made sure to completely remove my node_modules directory (git clean -fxd) and used yarn install (instead of yarn install --frozen-lockfile) to make sure my lock file gets updated.

Here's an excerpt of my package.json file:

    "@microsoft/applicationinsights-react-js": "3.1.1",
    "@microsoft/applicationinsights-shims": "2.0.0",
    "@microsoft/applicationinsights-web": "2.6.2",

Here's the contents of my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

It should be noted that upgrading @microsoft/applicationinsights-react-js from 3.1.0 to 3.1.1 was an improvement in that I can now get the error when testing locally. In other words, with 3.1.0 the error only appeared on the production build (yarn build) but with 3.1.1 the error also appears locally (yarn start).

Here's a screenshot of the error:

[MSNev]

I've deprecated the react v3.1.1 and react-native v2.3.1 packages until I can publish an updated versions #1553

[MSNev]

Hi @benrobot #1551 was closed (as commented in the issue) as a duplicate of the listed issues.

If your using webpack then based on LOTS of feedback this WILL fix the issue, while I've just deprecated v3.1.1 I am actively working on fixing the issue so that v3.1.2 (when available) won't need these work-arounds as they should just include it automatically.

Unfortunately, there is a build configuration issue (which is not trivial) that I need to fix before I can publish this updated version, if I don't get it out today I will be working to get it out tomorrow.

[benrobot]

@MSNev Thank you for the update. I really appreciate you quick responses to our comments.

[MSNev]

I'm updating #1553 with the current state, please see comments there for additional info.

[mucahitgurbuz]

Hi @benrobot #1551 was closed (as commented in the issue) as a duplicate of the listed issues.

If your using webpack then based on LOTS of feedback this WILL fix the issue, while I've just deprecated v3.1.1 I am actively working on fixing the issue so that v3.1.2 (when available) won't need these work-arounds as they should just include it automatically.

Unfortunately, there is a build configuration issue (which is not trivial) that I need to fix before I can publish this updated version, if I don't get it out today I will be working to get it out tomorrow.

I see that you have fixed the issue on the version 3.1.2. However, version 3.1.2 have a peerDependency as React 17. Not all the project has the minimum React version as 17....

[MSNev]

What version of react are you using?

@kryalama for visibility as we updated to v17 a few months back

[mucahitgurbuz]

sibility as we updated to v17 a fe

I am using React 16.13.*