webpack build oidc-client results in Oidc.Usermanager is not a constructor

Question

I have an angularjs app in which I have the oidc-client working. When I launch my angularjs application from Visual Studio. I have not problems with the oidc-client. everything is working. But when I use Webpack to bundle it, its giving me a strange error saying that Oidc.Usermanager is not a constructor...

I am running an hybrid angularjs/angular app on Visual Studio .net core. I use the WebpackDevMiddleware like this

    app.UseWebpackDevMiddleware(new 
   Microsoft.AspNetCore.SpaServices.Webpack.WebpackDevMiddlewareOptions()
        {
            HotModuleReplacement = true,
            ConfigFile = Path.Combine(env.ContentRootPath, 
   @"ClientApp\src\webpack.config.js"),
            ProjectPath = Path.Combine(env.ContentRootPath, @"ClientApp\")
        });

I have the following webpack configuration for the oidc-client. I use version 1.9.0

plugins: [
new HtmlWebpackPlugin({
  template: './config/index.html'
}),
// new webpack.ProvidePlugin({
//   foundation: 'foundation-sites/js/foundation/foundation'
// }),
new webpack.ProvidePlugin({
  $: path.resolve(__dirname, './app-old/scripts/jquery-2.1.4.js'),
  jQuery: path.resolve(__dirname, './app-old/scripts/jquery-2.1.4.js'),
  "window.jQuery": path.resolve(__dirname, './app-old/scripts/jquery- 
2.1.4.js')
}),
new webpack.ProvidePlugin({
  Oidc: path.resolve('./src/app-old/scripts/oidc-client.js'),
  "window.Oidc": path.resolve('./src/app-old/scripts/oidc-client.js')
}),
new webpack.ProvidePlugin({
  toastr: 'toastr',
  "window.toastr": "toastr"
})

This is the oidc-client code which gives the error

  var config = {
        authority: "http://localhost:52606/",
        client_id: "js",
        redirect_uri: "https://localhost:5001/#/",
        response_type: "code",
        scope: "openid profile",
        post_logout_redirect_uri: "https://localhost:5001/",
        automaticSilentRenew: true,
        loadUserInfo: true
    };

    var mgr = new Oidc.UserManager(config);

This is error I get

  TypeError: Oidc.UserManager is not a constructor
at Object.eval (authService.js:42)
at Object.invoke (angular.js:4762)
at Object.enforcedReturnValue [as $get] (angular.js:4600)
at Object.invoke (angular.js:4762)
at eval (angular.js:4560)
at getService (angular.js:4707)
at injectionArgs (angular.js:4732)
at Object.invoke (angular.js:4754)
at Object.enforcedReturnValue [as $get] (angular.js:4600)
at Object.invoke (angular.js:4762)

Without webpack everything works great. What am I missing?

score 1 · Accepted Answer · answered Aug 19 '19 at 12:27

Okay.. here is what I found out. Currently I am using version 1.9.0. When I use the version 1.9.0 of the node-modules the oidc-client file starts with:

var Oidc =
/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/

But when I go to GitHub and I download the latest file https://github.com/IdentityModel/oidc-client-js/tree/dev/lib. Its starting with the following code. And this code works also with webpack. and both are version 1.9.0. :-S

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else {
        var a = factory();
        for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
    }
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

webpack build oidc-client results in Oidc.Usermanager is not a constructor

1 Answers1