ionic2 not loading javascript import in UWP app

Question

I have an ionic2 app that works great in the browser however when I try to run it as a UWP app it fails with the following error:

JavaScript runtime error: Uncaught (in promise): Error: Error in :0:0 caused by: 'Oidc' is undefined

I'm using an oidc library in just one class so I went and looked there and I have the following:

import * as Oidc from 'oidc-client';

This seems to work fine when running the app in the browser but it doesn't seem to get picked up when run as an app. I don't know if this is a ionic build issue/ webpack / or most likely just my ignorance since i'm relying on a lot of pieces I don't fully understand.

I fixed this issue by directly referencing the script in my index.html file:

<script src="oidc-client.min.js"></script>

but that really seems like the wrong solution. Can someone point me in the right direction? I want to understand why my import sometimes works.

edit: Also no errors made it back to ionic cli. I had to load this up in Visual Studio to find the problem

Answer 1

I can't say for sure since I'm not familiar with Oidc, but sometimes doing 'import *' or 'export ' can break things when working with ionic 2 or just straight up angular 2. I think it's more of a webpack related issue. We've had weird build issues or stupid 'X is undefined' issues in our development and oftentimes it's been related to using the wildcards (I think technically they're called barrels?). Also, some libraries don't play nicely with ES6 modules, although that might not be your case since it runs fine in the browser. Once though I had a really small use case for jquery in an angular 2 app, and the only way to get it in the app was by sticking a link in the index.html. But my gut tells me your problem is with the import statement.