auth0-lock causing issues when used in a build process

[whyvez]

relates to original issue I filled here: auth0/auth0-angular#107

In this specific project we are using grunt to build all our vendor dependencies into a minified js file. In development everything works fine. When we build the production code and run it we get an Error: ClientID required as first parameter. error in the browser.

In dev when I look at the aut0-lock script in the chrome console it includes a whole bunch of other files and folders which differs from all the other dependency which are injected in an identical way. When I try to open the /dist/auth0-lock.js my editor goes nuts and cannot open the file.

Another colleague is working with me in trying to troubleshoot the issue and has found that auth0-lock.js is actually a folder which makes sense based on my findings outlined above.

Can you please help us shed light on what might be going on here and what we might be doing wrong?

[cristiandouce]

Sure!

Is there a way you could provide with a sample buildable script with configurations like the ones you use on your production build task?

Or describe the libs you use for minification, settings, etc...

I think it would be easier if you could post a repository on github with a build task similar to your production settings so I could debug it there.

Thanks for reporting!

[cristiandouce]

BTW, the message you are getting comes from here:

lock/index.js

Line 63 in 093f8cd

if ('string' !== typeof clientID) throw new Error('`ClientID` required as first parameter.');

Which means that for some reason, you are not providing with a client ID of string type, leading me to believe it´s even undefined or some other type.

I see that you are using it here: https://github.com/avalanche-canada/ac-web/tree/dev

I'll try to run it, but it would be cool you could debug that.

Thanks!

[cristiandouce]

So, I've been able to reproduce the issue, but had no chance to debug it.

It would be nice to have a tinier demo app to check this out, maybe some sourcemaps and perhaps just minify instead of uglify everything.

[whyvez]

The project is here: https://github.com/avalanche-canada/ac-web

The current build uses static script tag set in the index.html page. If you swap those to use bower you will encounter the issue I am referring too.

npm install & bower install

1. comment out the static script refs in /client/index.html.
2. bower install auth0-angular --save
3. grunt bowerInstall this will add the script tags for auth0-lock and auth0-angular in the index.html
4. here running grunt serve will open the browser window and everything should work OK.
5. grunt build
6. then open the /dist/index.html in the browser over http (i.e. http-server)
7. you will get the error I mentioned

[cristiandouce]

Yes, like I said before I was able to reproduce the error, but since there are many other things going around, I was not able to debug it (neither could get the source maps to work there).

Besides, I tend to bet it's an angular issue with how the uglification is working and not a Lock issue.

The fact that the error thrown says Error:ClientIDrequired as first parameter. means it's being initialized with the wrong parameters (because of the uglification). It's not a type error or a wrong usage of the lib's internal if you know what I mean.

There is something going on with the uglification task that is messing with the parameters passed to to the lib.

Is there a way you could isolate this issue in a sample repository with the same build tasks, but without all the rest of dependencies?

Leaving just auth0-angular and auth0-lock, and then just auth0-lock.

Thanks!

[cristiandouce]

In fact, I'm going to close this and follow in the original issue just to not have duplicates of the same.

auth0/auth0-angular#107