Import issue of oidc-client in vue.js project

[rmeissn]

I imported the button as described and used it in my vue.js application (Vue 2.6).
Unfortunately the button isn't working as the import of the underlying oidc-client fails.

In your code you imported the lib on line 11 by executing import 'oidc-client'; (side-effect import).
On line 164 you're using an imported value from this lib via this._manager = new UserManager(settings);
My browser (Firefox 69) complains about UserManager not defined

If I change these two lines to:

import * as test from 'oidc-client';
this._manager = new test.UserManager(settings);

it works as expected.

[istvank]

Hi @rmeissn! Until IdentityModel/oidc-client-js/issues/960 is fixed, I created the workaround branch global-oidc. Can you please check if this works with Vue? I removed all the internal imports of oidc-client and now rely on a (admittedly, dirty) direct reference. if this works for you, I can release a version 3.x and continue working on the shadow DOM styling. 😜

[rmeissn]

Sorry for the delay.
I installed the branch and can't confirm it to work. The browser still reports "ReferenceError: UserManager is not defined".
See this branch for my software: https://gitlab.com/Tech4Comp/eas.lit-ui/tree/login-button

[istvank]

Did you import the openidconnect library within your top-level HTML? Because then UserManager should be defined on global.

[rmeissn]

I've tried for a whole day to import the library globally (browser) and read a lot of vue, various library and webpack documentation about this. Basically each tipp I found was: avoid this scenario; use another library; rewrite it as a proper module; don't use the functionality. The whole webpack & vue community wants to avoid this scenario (for various reasons) and implemented a lot of obstacles to keep people from doing this. Actually I found no way to import it globally, except from copying the file to a served folder - which can't be the solution as it is the starting point of a dependency nightmare - see my stackoverflow question: https://stackoverflow.com/questions/59172786/import-and-evaluate-a-node-modules-script-globally-browser-in-a-vue-project-c . Furthermore I'm not sure if this might work at all, as the file includes a lot of webpack instructions itself.

Importing it globally solved the ReferenceError, but I'm being anguish about this solution. I've noticed that the issue you've mentioned earlier is not resolved, but has a merged PR. Could you please have a look if this resolves the problem?

[rmeissn]

Are there any news about this issue?