Applicationinsights-js: [BUG] Uncaught ReferenceError: __extends is not defined

[plamenkoyovchev]

Description/Screenshot
I have a react app which is created with create-react-app.
When I create production build of my app and serve it I'm getting the following error:

The problem exists only when app is build for production. It's working when starting it in development mode.

It's not working even in this demo app: https://github.com/Azure-Samples/application-insights-react-demo
I had to update to 3.0.5 because the older version doesn't have AppInsightsErrorBoundary

Packages

• "@microsoft/applicationinsights-react-js": "^3.0.5",
• "@microsoft/applicationinsights-web": "^2.6.1",
• "react": "^16.13.1"

Steps to Reproduce

• create app with create-react-app
• wrap some component with the AppInsightsErrorBoundary component
• npm run build
• serve -s build

[MSNev]

Can I assume that you are using a bundling package (like webpack)?

I believe this is a duplicate issue and a workaround for the bundling is included in #1281, the workaround included for the webpack chunking issue is below (taken from #1281)

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

And further details

• The underlying reason why this occurs is included in #1269
• And I currently have a PR out #1523 (for the next release) to resolve this issue #1280, which will also resolve this as it rewrites and replaces the tslib __extends() during build so that it is always present.

[MSNev]

Closing as believe the workaround addresses the issue

[MSNev]

v2.6.2 will also fix these type of issue moving forward as we will be including our own version directly, rather than relying on the TsLib (or shims) versions being included by packagers

[parthopdas]

@MSNev

updating to v2.6.2 of applicationinsights-web didn't work unfortunately.

with v2.6.2 of applicationinsights-web ie https://github.com/digitalpalitools/web-ui/commit/42c55ace08021eabab18b202896ad00efa7e876d i get the following error

however things are fine after applying your provideplugin workaround, in addition to the above ie https://github.com/digitalpalitools/web-ui/commit/b6b89706028ab34082f2bf001cab12ceff84e850

[mmarshad]

@parthopdas
I'm experiencing the same problem as upgrade did not work for me either. but I'm using the create-react-app template and therefore did not have webpack config file. How can I apply the patch in my code as I only have the package.json and tsconfig.json files.

[parthopdas]

@mmarshad i am using craco which lets you hijack into webpack config of a CRA app- you can refer to https://github.com/digitalpalitools/web-ui/ on how to do it.

[mmarshad]

@parthopdas : Thanks for response, I'm afraid I can't use that.

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

PR for bumping versions to consume v2.6.2 and shims v2.0.0 is out #1552

[MSNev]

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

[TaranbirBhullar]

@MSNev We recently upgraded to the following packages

+-- @microsoft/[email protected]
  | +-- @microsoft/[email protected]
  | | `-- @microsoft/[email protected]  deduped 
  | +-- @microsoft/[email protected]
  | | `-- @microsoft/[email protected]  deduped 
  | `-- @microsoft/[email protected] 
  `-- @microsoft/[email protected]
    +-- @microsoft/[email protected]     
    | `-- @microsoft/[email protected]  deduped 
    +-- @microsoft/[email protected]       
    | `-- @microsoft/[email protected]  deduped 
    +-- @microsoft/[email protected]  
    | `-- @microsoft/[email protected]  deduped
    +-- @microsoft/[email protected]
    | `-- @microsoft/[email protected]  deduped
    `-- @microsoft/[email protected]  deduped

And it started causing the same issue as above

// compiled 
 var ReactPlugin =
  66491 | /** @class */
  66492 | function (_super) {
> 66493 |   __extends(ReactPlugin, _super);
        |   ^  66494 | 
  66495 |   function ReactPlugin() {
  66496 |     var _this = _super !== null && _super.apply(this, arguments) || this;


// source
  14 | import { IReactExtensionConfig } from './Interfaces/IReactExtensionConfig';
  15 | import { History, LocationListener, Location, Action } from "history";
  16 | 
> 17 | export default class ReactPlugin extends BaseTelemetryPlugin {
  18 |     public priority = 185;
  19 |     public identifier = 'ReactPlugin';
  20 | 

What our fix was to revert back to the following version
@microsoft/applicationinsights-react-js v3.1.0

| `-- @microsoft/[email protected]
|   +-- @microsoft/[email protected]
|   | `-- @microsoft/[email protected]  deduped
|   +-- @microsoft/[email protected]
|   | `-- @microsoft/[email protected]  deduped
|   +-- @microsoft/[email protected]
|   | `-- @microsoft/[email protected]  deduped
|   +-- @microsoft/[email protected]
|   | `-- @microsoft/[email protected]  deduped
|   `-- @microsoft/[email protected]
`-- @microsoft/[email protected]
  +-- @microsoft/[email protected]
  | `-- @microsoft/[email protected]  deduped
  +-- @microsoft/[email protected]
  | `-- @microsoft/[email protected]  deduped
  `-- @microsoft/[email protected]

[MSNev]

Oh well crap!

I forgot to update the packaging step to re-use the shims instance.
I'll create a new bug and publish another version.

[MSNev]

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

[MSNev]

1553

[MSNev]

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