Lock: Uncaught Error: Cannot find module 'undefined' in auth0-lock's standalone.js file

[chelzwa]

Our site is working fine when it's served locally by gulp, but fails with an "Uncaught Error: Cannot find module 'undefined'' on line 17 (the last line) of auth0-lock's standalone.js file when we build and serve the concatenated version.

Here's the file:

/*
 *
 * This is used to build the bundle with browserify.
 *
 * The bundle is used by people who doesn't use browserify.require
 * Those who use browserify will install with npm and require the module,
 * the package.json file points to index.js.
 */
var Auth0Lock = require('./');

// use amd or just throught to window object.
if (typeof global.window.define == 'function' && global.window.define.amd) {
  global.window.define('auth0-lock', function () { return Auth0Lock; });
} else if (global.window) {
  global.window.Auth0Lock = Auth0Lock;
}

Let me know if there's any more information I can provide which would be helpful.

[pose]

What version of Lock are you using? Are you using requireJS? How are you including Auth0 Lock in your project? Thanks!

[chelzwa]

Auth0-lock version 7.0.0, we are not using requireJS, and we're using bower to install auth0-lock, and gulp inject and gulp useref to include it. It seems likely that useref is the problem here, because gulp inject is being run when we serve the site locally, and that's working just fine.

[pose]

@chelzwa can you show me how are you including Auth0 Lock in the html file you are applying useref to? Thanks

[pose]

Also, if you have a small sample where we can take a look it would be great. Thanks!

[chelzwa]

Here's a small project which demonstrates the issue: https://github.com/chelzwa/auth0-lock-example
And here's a link to the above project deployed: http://githubexample.test.dokku.praece.com/

Gulp automatically injects all of the bower scripts into index.html when the project is built or served, so if you check out .tmp/serve/index.html, you can see where auth0-lock is being added using the following line:

<script src="../bower_components/auth0-lock/build/auth0-lock.js"></script>

Thank you so much for your help!

[pose]

Hi @chelzwa,

It seems to be an AngularJS issue (not a Auth0 Lock one):

I cannot find the reference to the standalone.js file you mention.

Thanks in advance,

[chelzwa]

Hey, I've removed uglifying and minifying from gulp build so you can see what's going on more clearly. Let me know if the console is still not showing standalone.js as the issue (you can double check that your browser hasn't cached the site by checking that the vendor file in /scripts shows human-readable code). http://githubexample.test.dokku.praece.com/

Let me know how that goes!

[chelzwa]

Tried pulling auth0-lock out of the vendor scripts block, which prevents auth0-lock from being concatenated with the other vendor scripts, and that fixed the problem. Gulp is automatically injecting all of our vendor scripts, so we don't have the ability to change the order that the scripts are added to our index.html file, but I'm curious whether the problem is that the auth0-lock script must be placed above the auth0-angular script, or if it's concatenation of auth0-lock that's actually the problem.

I.e. would this be expected to work:

<script src="../bower_components/auth0-angular/build/auth0-angular.js"></script>
<script src="../bower_components/auth0-lock/build/auth0-lock.js"></script>

or does it need to be:

<script src="../bower_components/auth0-lock/build/auth0-lock.js"></script>
<script src="../bower_components/auth0-angular/build/auth0-angular.js"></script>

[cristiandouce]

@chelzwa to answer the order of the scripts, this tutorial marks the order the scripts should be included in the DOM:

https://auth0.com/docs/quickstart/spa/angular/no-api

<!-- We use client cookies to save the user credentials -->
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js"></script>

<!-- Auth0 Lock script and AngularJS module -->
<script src="//cdn.auth0.com/js/lock-6.7.min.js"></script>
<!-- angular-jwt and angular-storage -->
<script type="text/javascript" src="//cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>

<script src="//cdn.auth0.com/w2/auth0-angular-4.js"> </script>

<!-- Setting the right viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

[chelzwa]

Alright, we'll look into fixing the order gulp is injecting those then. Thank you so much for your help!

[nandanrao]

@chelzwa did you ever get this figured out? I'm having the same exact problem with useref and gulp-angular generator. Gulp-useref keeps the order the same as they are founded in the template, and in the template they are included in the proper order, as it is determined by bower (I install auth0-angular, which installs both auth.js and auth-lock.js, in that order). I've confirmed the order is correct in the concatenated file, auth0-lock indeed comes before auth-angular, but auth0-lock still blows up when concatenated, just like you've described, but works fine with separate script tags!!! I'm completely bewildered...

[rcrupp]

This ordering in bower.json corrected the problem for me:

"angular-cookies": "~1.3.15",
"auth0-lock": "~7.5.1",
"auth0.js": "~6.4.1",
"auth0-angular": "~4.0.5",
"a0-angular-storage": "~0.0.10",
"angular-jwt": "~0.0.7"

[bnhovde]

@rcrupp This fixed my problem too.

[dberringer]

Thanks @rcrupp! I had the same issue. I followed this(https://auth0.com/docs/quickstart/spa/angular/no-api) order but got the standalone.js error after running grunt build. Your ordering seems to have fixed the issue. :)

[nareshbhatia]

Even after using the ordering suggested by @rcrupp, my app still breaks in the concatenated version. Reading this thread, it is not clear if anyone has found the underlying issue.

To be precise, this is what my bower.json ordering looks like (for Auth0 components):

"auth0-lock": "~7.6.2",
"auth0.js": "~6.4.2",
"auth0-angular": "~4.0.5",
"a0-angular-storage": "~0.0.11",
"angular-jwt": "~0.0.9"

When this did not work, I disabled the automatic injection of bower dependencies in to my index.html. This is the order of _manual_ inclusion in my index.html now:

<script src="/bower_components/auth0-lock/build/auth0-lock.js"></script>
<script src="/bower_components/auth0-angular/build/auth0-angular.js"></script>
<script src="/bower_components/a0-angular-storage/dist/angular-storage.js"></script>
<script src="/bower_components/angular-jwt/dist/angular-jwt.js"></script>

As noted in auth0-angular documentation, I have included auth0-lock.js before auth0-angular.js. Also based on the same documentation, I have not included auth0.js. Given this sequencing, I am getting this following error:

Uncaught Error: Cannot find module 'undefined'

This error is happening at the first line of auth0-lock.js. Surprisingly the first function in this file is minified and uglified (although this is not the minified version of the file, also I have disabled all minification):

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof ...

I wonder if the underlying issue is because of improper uglification of this function. Why is this function uglified? Where is the original source?

Please help! Is there anything I am doing wrong in following the instructions or the documentation?

[Zertz]

I have stumbled upon exactly the same issue. Turns out there is something wrong with angular-storage.js. The following "fix" worked for me:

<script src="bower_components/auth0-lock/build/auth0-lock.js"></script>
<script src="bower_components/a0-angular-storage/dist/angular-storage.min.js"></script>
<script src="bower_components/angular-jwt/dist/angular-jwt.js"></script>
<script src="bower_components/auth0-angular/build/auth0-angular.js"></script>

Basically, use the minified angular-storage.min.js

[nareshbhatia]

Using a minified file and having it re-minified by my build process can cause other issues. I have been burnt by that in the past. I would rather have Auth0 find the root cause of this issue and provide a solution.

[Zertz]

Of course, I agree with you! However, for those who need a solution right now, this is the next best thing.

Also, for what it's worth, I ran it through concat and uglify and everything works fine.

[nareshbhatia]

Thanks. Good to know.

[Zertz]

@pose The issue is with your angular-storage module. Care to take another look at it? :)

[slyedoc]

The odering provided by rcrupp worked.

[jmls]

just been bitten by this as well :(

[cristiandouce]

@jmls version you are using? this is resolved in latest versions.

[jmls]

interesting. I'll check - adding in the ordering above has fixed it though

[PierreReliquet]

I just encountered the same issue with the version 7.12.5 of auth0-lock. I do not use any other auth0 dependency.

[gnandretta]

@PierreReliquet did you encounter the issue when building the bundle for your application? can you provide a minimal example that reproduces the issue?

[jmls]

I've hit this again. My bower.json has these entries:

"auth0-lock": "~8.1.1",
"auth0-angular": "auth0/auth0-angular#~4.1.0",
"a0-angular-storage": "~0.0.13",
"angular-jwt": "~0.0.9"

it's fine when running with "gulp serve" (no minification) but after a build , which does a minify, this problem pops up

[gnandretta]

@jmls can you provide a minimal example that reproduces the issue?

[jmls]

yikes. I can but try ;)

[jmls]

hmm, just for the record ...

    "auth0-lock": "~8.1.1",
    "auth0.js": "~6.8.0",
    "auth0-angular": "auth0/auth0-angular#~4.1.0",
    "a0-angular-storage": "~0.0.13",
    "angular-jwt": "~0.0.9"

I added auth0.js, rebuilt, and the error has now gone ...

[jmls]

and I've hit it again. this is getting silly

"auth0-lock": "^9.0.0",
"auth0.js": "^6.8.0",
"auth0-angular": "^4.1.0",
"a0-angular-storage": "^0.0.13",
"angular-jwt": "^0.0.9",

[aug2uag]

I'm dealing with this issue in Meteor at the moment; works locally as-is, and not with deployed build

temporarily solved by preloading the lock script from cdn

[gabzim]

hit by this too, why is this closed??

[gnandretta]

@arg20 can you provide a sample that reproduces the issue so I can debug it?

[matiishyn]

OMG, I was getting this error, I didn't even realised it was about Auth0 :(

[matiishyn]

what a silly issue. I spent so much time to find out at least what was happening

[gnandretta]

Hi @matiishyn.

We have seen that people having this issue always use auth0-angular and their bundle includes auth0-angular before auth0.js or lock. In order for auth0-angular to work it must come last, as stated in the README. If that doesn't fix you problem, please open a new issue in the tracker for that project.

If you are just using lock, please open a new issue here with some information about the problem so we can debug it.

On a side note, we have considered these bundling issues and hopefully they won't come up in forthcoming versions of both auth0-angular2 and lock.

[matiishyn]

Yes, it works now. Thank you for support