[BUG] Version 2.6.2 built with react-script build results in a runtime error

[jmyrland]

Description

After upgrading to @microsoft/applicationinsights-web@2.6.2 (from 2.6.1) in a react project, the built solution (via react-scripts) produces a runtime error, resulting in a blank screen.

The following error is present in the console:

ReactPlugin.ts:103 Uncaught ReferenceError: __extends is not defined
    at ReactPlugin.ts:103
    at Object.<anonymous> (ReactPlugin.ts:17)
    at f ((index):1)
    at Object.53 (main.5d60f9e0.chunk.js:1)
    at f ((index):1)
    at Object.28 (main.5d60f9e0.chunk.js:1)
    at f ((index):1)
    at Module.345 (main.5d60f9e0.chunk.js:1)
    at f ((index):1)
    at r ((index):1)

Steps to Reproduce

0. Setup a create-react-app project with @microsoft/applicationinsights-web@2.6.2 & @microsoft/applicationinsights-react-js@3.1.0
1. Build the project
2. Serve the build folder
3. When accessing the webpage, the screen is blank with the error above in the console.

• OS/Browser: Windows 10, Chrome
• SDK Versions:
  • @microsoft/applicationinsights-web@2.6.2
  • @microsoft/applicationinsights-react-js@3.1.0
  • react-scripts@4.0.3

Additional info

This issue only occurs when built. Starting a development server works fine.

[xavisegura]

Same behavior as above.

[MSNev]

This is a duplicate issue and is related to these issues (which include workarounds)
#1527, #1281, #1280, #1269

Additionally, v3.1.1 of the react plugin will address this as it will no longer be using the applicationinsights-shim v1.0.3 module
PR for version bumps #1552

Closing this specific issue due to duplications

[MSNev]

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

[MSNev]

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

[phanikumarbommidi]

I am new to this NPM and I am facing the same error with the below dependencies in dev environment. The dev environment used to work fine till Friday.
"@microsoft/applicationinsights-react-js": "^3.1.0"
"@microsoft/applicationinsights-web": "^2.6.0"
"react-scripts": "3.4.0"

Can some one explain why this is happening all of a sudden?, Please let me know the possible work-around to overcome this issue.

[MSNev]

The __extends issue has be "around" since May 2020 (because of #1269 and the workaround we put in place), as part of the workaround we created the application-shims module which exposed global versions of the __extends() and __assign() tslib helpers, and as these where imported in the index.ts of each module it was "generally" available (in devlopment mode), when using production mode for several packagers this caused the code that "exposes" the global versions of the tslib helpers to not get included and thus the exceptions __extends() not found and others.

The workaround for this for webpack IS to use the ProdiverPlugin and force these helpers to always be present in every created chunk and use either the tslib versions or the ai-shims version.

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

And as part of v2.6.2 we "fixed" (removed) the globals for the main Application Insights module (#1280) and all usages of these modules no longer need to use the workaround as during packaging these are now re-written to directly use the new v2.0.0 of the ai-shims components.

The missed / unexpected issue however, is that because we (currently) have to wait for the main modules to be published before we can publish the react and react-native plugins, the code directly in these plugins still require the global functions to be present (and they are defined in the main modules -- so dev / non-chunked versions work), and because the main v2.6.2 no longer import and expose the globals it now requires that either the ReactPlugin is included in totality or the above work-around is used.

I attempted to "fix" this eariler today by publishing v3.1.1, which "mostly" worked, however, the packaging step to re-write the usage got missed, thus making v3.1.1 a major breaking version (this is why I deprecated it).

I am planning to publish v3.1.2 to complete the fix and removed of the globals by the end of tomorrow (was trying for today, but validating the fix is a little more complex) the Issue I'm using for this is #1553.

• I currently have the react plugin in a state that looks good and I'm finalizing the react-native changes
• Our publish automation currently builds and deploys these 2 components together.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.