SPFX - undefinedundefined is not defined

[enti333]

Hello. I try to use this code in my spfx application.

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

const appInsights = new ApplicationInsights({ config: {
instrumentationKey: 'MY KEY'
/* ...Other Configuration Options... */
} });
appInsights.loadAppInsights();
appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview

Evrything is correctly deffined after my direct testing it was working.

But if I insert this code to spfx in render function I get this error

[SPLoaderError.loadComponentError]:
***Failed to load component "aea736a1-9c8e-4afc-891c-6487bb08d2a9" (OFormWebPart).
Original error: ***Failed to load entry point from component "aea736a1-9c8e-4afc-891c-6487bb08d2a9" (OFormWebPart).
Original error: Error loading https://component-id.invalid/aea736a1-9c8e-4afc-891c-6487bb08d2a9_0.0.1
undefinedundefined is not defined

***INNERERROR:
***Failed to load entry point from component "aea736a1-9c8e-4afc-891c-6487bb08d2a9" (OFormWebPart).
Original error: Error loading https://component-id.invalid/aea736a1-9c8e-4afc-891c-6487bb08d2a9_0.0.1
undefinedundefined is not defined
***CALLSTACK:
Error
at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:8390:24)
at new SPLoaderError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:4036:28)
at Function.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:3789:21)
at Function.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:3697:21)
at https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:6275:47

When I remove this code my spfx is correctly working....
Hmm...What is wrong ... Thank you.

[MSNev]

What version of App Insights are you using?
I also assume this is via an npm package?
What packaging manager are you using? I have seen 1 other case of this where webpack added "undefinedundefined" at the end of the ajax package even though there is nothing in the source module that should have caused this.
The possible work around I gave (but have not heard back yet) was to explicitly add the new dependency dynamicProto() to the list of your dependencies...

[enti333]

Hello. Thank you for answer.
I am using the latest version of App Insights.
Yes this is via NPM.
I am not sure what packaging manager use SPFX but I think that webpack.
What is dynamicProto()? I am sorry I don't understand that....

Problem is that when I create completly new project SPFX which has no other npm instalation onli app insights it works....But in existing solution which has many other packages included it doesn't....So my only chance is to test every package which can be a problem with app insights?:(

[MSNev]

Dynamic Proto is a new dependency project that we are using to assist with keeping the size of the overall packages smaller
https://github.com/microsoft/DynamicProto-JS

You should be able to include it via your package definition, this is what we have in the app insights package.json
"dependencies": {
"@microsoft/dynamicproto-js": "^0.5.2",

[enti333]

Hmm...I will try it and let you know...Thank you for your help. Od: Nev <notifications@github.com> Odoslané: Wednesday, March 25, 2020 6:47 PM Komu: microsoft/ApplicationInsights-JS <ApplicationInsights-JS@noreply.github.com> Kópia: enti333 <antalik@netkosice.sk>; Author <author@noreply.github.com> Predmet: Re: [microsoft/ApplicationInsights-JS] SPFX - undefinedundefined is not defined (#1227) Dynamic Proto is a new dependency project that we are using to assist with keeping the size of the overall packages smaller https://github.com/microsoft/DynamicProto-JS You should be able to include it via your package definition, this is what we have in the app insights package.json "dependencies": { "@microsoft/dynamicproto-js": "^0.5.2", — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1227 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADVKHXJOIL6OC42LJLBKXQTRJI7QHANCNFSM4LTQFE2A> . <https://github.com/notifications/beacon/ADVKHXMQDADI7G4LN7JUDL3RJI7QHA5CNFSM4LTQFE2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEQAB2GQ.gif>

[MSNev]

So far I've not had any success in reproducing the issue, can you please review the generated files (from webpack) the non-minified versions (assuming that you also minify them) and find where in the code that the "undefinedundefined" exists... As I'm looking to see if there is some pattern that is causing webpack to not work, looking for the wrapping class function.

Additionally, what versions of webpack and SPFX are you using.

[MSNev]

Is it possible for you to provide a cut down sample project that shows this error?
You can zip and attach to a comment to share -- just remove any of your personal/propriety from the sample as this is public -- just use "INSTRUMENTATION_KEY" instead of your real one.

[MSNev]

I've been continuing my investigations and while I've still not been able to repro the issue the inclusion of dynamicProto does not seem to be the issue. But rather the issue seems to be something around the source-map resolution as the internal team that had a similar issue has the generated "undefinedundefined" appearing at the same location as the map file name from the original file.

Is this issue still occurring for you and if so can you provide a list of the versions of npm packages to the thread using "npm list > npmlist.txt" and uploading the npmlist.txt. please remove or mask (replace with x's or #'s) any private package names that you don't want to share.

[enti333]

Thank you very much for your help. My only chance was to recopy the project and prepare it from null. So after that it start again work...Right now I am using the SPFX 1.10. and it is working....There must sme problem with my other packages ...but I don't know which?:(But again thank you very much for your help with this:)

[MSNev]

No Problem, as it's resolved I'll close this issue. I suspect that the problem was caused by some dependent project (possibly used by webpack) that has since been resolved / fixed.

Thanks.

[zlepper]

I'm also having this problem in an Angular app.

For now i have worked around it by downgrading Application Insights to version 2.4.4 (The previous version we used at least)

I have also attached the npm list output.

npmlist.txt

[MSNev]

Hi, I've recreated a package.json with the top level packages from the npmlist and on installing all of the there are a number of differences that I'm seeing.

Can you please try removing your node_modules filder and reinstalling all of the packages (npm install) and if you are still seeing the issue is it possible to provide a cut down version of a project with the package.json which includes a script to package using the angular-devkit, it shouldn't need all of your code just a simple script that includes and calls the initialize method of app insights.

i.e. a project with just Index.js that creates an ApplicationInsights() and calls trackPageView() or some other track method()

[MSNev]

@zlepper Any updates from my last comment?

[MSNev]

While I've been unable to repro as defined, I believe I've identified the issue and I'm working on a fix

[MSNev]

And If correct, this issue only affects NPM users that are consuming the dist-esm module files.

[MSNev]

Fixed deployed as NPM and next CDN channels

[MSNev]

Closing as this is an NPM issue only

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