Webpack

[nelix]

I tried to load this using webpack but I did not very very far due to not knowing what loaders it would require...
Any advice?

[jfromaniello]

You have to download the release from github and require build/auth0-lock.js.

[nelix]

I'd rather require and build it through webpack.
I did manage to get it working though!

I added these loaders to my webpack config:
{
test: /.js/,
include: path.join(__dirname, 'node_modules/auth0-lock'),
loaders: ['transform?packageify', 'transform?brfs']
},{
test: /.ejs/,
include: path.join(__dirname, 'node_modules/auth0-lock/'),
loader: 'transform?ejsify'
},{
test: /.json/,
include: path.join(__dirname, 'node_modules/auth0-lock/i18n/ru.json'),
loader: 'json'
},{
test: /.json/,
exclude: /ru/,
include: path.join(__dirname, 'node_modules/auth0-lock'),
loader: 'json5'
}

[nelix]

I had a few issues with the json especially due to trailing commas being invalid json or duplicate keys making other riles invalid json5 (ru.json specifically).

Anyway it would be awesome if it was a little easier to use with webpack out of the box

[jfromaniello]

I'm not familiar with webpack, but it looks like require.js/AMD.

I don't think you will be able to do that because we've used in this project Browserify/NPM, which means that:

• We use the CommonJS pattern not the AMD pattern.
• We rely on browserify transforms etc.

So, there are three ways to use this module:

1. npm install lock... and browserify
2. downloading the release from github and including the script directly in the page
3. downloading the release from github and using a requirejs module loader.

In 1 the library is build in the target application, in 2 and 3 you use the already built in artefact.

I've explained my approach to this very same issue here:

http://stackoverflow.com/questions/16172035/browserify-use-module-exports-if-required-otherwise-expose-global/19568300#19568300

[nelix]

I actually have it working. Webpack uses commonjs and is very much like browserify (it even has a browserify transform). Its just a bit non trivial to get up and running.

It would not be hard to get it loading in webpack by default, but if anyone else asks you can tell them about the loaders I used above.

[jfromaniello]

Awesome! So glad to hear that,

Is there something we can do on our side to improve the experience besides maybe a wiki/readme entry?

[nelix]

Apart from fixing the trailing coma's in the translation json you could
A wiki entry mentioning to use the browserify loaders:
{
test: /.js/,
include: path.join(__dirname, 'node_modules/auth0-lock'),
loaders: ['transform?packageify', 'transform?brfs']
},{
test: /.ejs/,
include: path.join(__dirname, 'node_modules/auth0-lock/'),
loader: 'transform?ejsify'
},{
test: /.json/,
include: path.join(__dirname, 'node_modules/auth0-lock/i18n/ru.json'),
loader: 'json'
}

I can make a wiki entry and submit a PR for those issues

[cristiandouce]

That would be very much appreciated!

The wiki is public so you can create a document whenever you want.

[rayvace]

I had to modify @nelix proposed fix slightly to get this to work. In particular, I had to add an end of line anchor to the regex, i.e, "test: /.json$/", to keep files like "/auth0-js/lib/use_jsonp.js" from being picked up in the webpack build.
...
, {
test: /.json$/,
exclude: /ru/,
include: path.join(__dirname, 'node_modules/auth0-lock'),
loader: 'json5'
}
...

Everything else worked perfectly.

[carnevalle]

I can't get above example to work with webpack. Anyone have a complete working example?

[cancan101]

I also cannot get the above to work.
Also what devDependencies are needed?

[kpgarrod]

I'm also having problems with this. Did anybody get it right? I'm getting json errors.

[jfromaniello]

Can you guys try with v7.5.4 just released?

Thanks a bunch

[cancan101]

@jfromaniello Do you have an example how the webpack file should look?

[kpgarrod]

@jfromaniello I would also like an example please. I tried again today with v7.5.4 but did not succeed.
I did get the app to build using @nelix's loader definitions, however it doesn't run.

I'm not sure if this is still the same issue - I am trying to use Lock with angular and am now getting an error from auth0-angular:

ReferenceError: Auth0Widget is not defined
    at constructorName (webpack:///./~/auth0-angular/build/auth0-angular.js?:185:21)
    at angular.module.provider.init (webpack:///./~/auth0-angular/build/auth0-angular.js?:203:31)
    at eval (webpack:///./coachesNetwork/index.js?:21:18)
    at Object.invoke (webpack:///./~/angular/angular.js?:4426:17)
    at runInvokeQueue (webpack:///./~/angular/angular.js?:4332:35)
    at eval (webpack:///./~/angular/angular.js?:4341:11)
    at forEach (webpack:///./~/angular/angular.js?:336:20)
    at loadModules (webpack:///./~/angular/angular.js?:4322:5)
    at createInjector (webpack:///./~/angular/angular.js?:4248:11)
    at doBootstrap (webpack:///./~/angular/angular.js?:1625:20)

I see that auth0-angular throws that error if window.Auth0Lock is not defined.

I have tried including the library in a couple of ways:

• var Auth0Lock = require('auth0-lock')
• new webpack.ProvidePlugin({ Auth0Lock: 'auth0-lock/index' })

[cristiandouce]

@kpgarrod

1. If you use the index.js to load the Auth0Lock, you must build it with all it's browserify transformations. I'd recommend you to just load the build from auth0-lock/build/auth0-lock.js
2. What version of auth0-angular are you using?

[kpgarrod]

@cristiandouce I don't see a build directory in this repository. I am using auth0-angular 4.0.4.

[cristiandouce]

https://github.com/auth0/lock/tree/v7.5.4/build

The build directory is never pushed to master branch or any development branch, just the releases branches.

What is important is that if you installed lock with bower you should find that build inside your code.

[kpgarrod]

@cristiandouce: ah, that explains it. I'm not using bower anymore. I am installing with npm, but I still want to get the build code.

[cristiandouce]

You should still have that build directory from npm install. Is that not the case?

[kpgarrod]

no

[jfromaniello]

@kpgarrod @cristiandouce the build directory is not pushed to npm on purpose, if you install with npm you build with browserify.

If you want to install with npm and at the same time have the build folder in the release tag you can use this and install from github:

npm install auth0/lock\#v7.5.4

[jfromaniello]

no that doesn't work either because is npm ignored :(

[kpgarrod]

@jfromaniello: so any solution for this issue? I have been loading from cdn but the performance is sometimes very slow from where I am. That is making it difficult for me to work.

[jfromaniello]

@kpgarrod can you try like this:

npm i --save https://github.com/auth0/lock/archive/v7.5.4.tar.gz

[jfromaniello]

@kpgarrod btw, regarding this:

I have been loading from cdn but the performance is sometimes very slow from where I am

where are you from? (country)

[kpgarrod]

South Africa

[kpgarrod]

I tried installing from that url. I certainly do get the build directory that way, however it still doesn't work for me.

Webpack gives me this warning:

WARNING in ./~/auth0-lock/build/auth0-lock.js Critical dependencies: 1:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ./~/auth0-lock/build/auth0-lock.js 1:113-120

and when I run the app I get this angular error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:modulerr] Failed to instantiate module {} due to: Error: [ng:areq] Argument 'module' is not a function, got Object

In my limited experience, that usually means there is no export for a module that is being required.

[kpgarrod]

@jfromaniello I made pull requests for auth0-jwt, auth0-storage and auth0-angular to include an export statement like this:

if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports ===
exports) {
module.exports = 'auth0-lock';
}

That seems to be how other libraries deal with this issue.

My pull requests haven't been accepted, but I am successfully using my branch in my app. I think the same thing is needed here.

I wasn't sure where to add the statement in this library, so haven't made a pull request here, but it would be great if you could add the export to this and your other libraries.

[jfromaniello]

@kpgarrod I'll look into that.

In addition to that, I want to point out that we made a successful change to our cdn and we added a node to South Africa.

We will love to know the response time from your place to cdn.auth0.com now.

If you dig/nslookup cdn.auth0.com this is the ip it should be resolving: 41.185.31.164.

Thanks a lot for your troubleshooting

[kpgarrod]

@jfromaniello the cdn does resolve correctly and ping time is about 12ms, thanks!

[cristiandouce]

@kpgarrod @cancan101 @nelix @rayvace @carnevalle we have now an example using webpack in this repository.

Unless it doesn't work for you, I'm closing this issue for now.

You can follow the instructions here: https://github.com/auth0/lock/tree/master/examples/webpack#running-the-example

[kpgarrod]

@cristiandouce Unfortunately this is still not working for me.
If I require Lock as in your example, I get Auth0Widget is not defined from auth0-angular.

I can get my app to build and basically run by requiring lock like this: var Auth0Lock = require('auth0-lock/build/auth0-lock');, but I get warnings from webpack:

WARNING in .//auth0-lock/build/auth0-lock.js
Critical dependencies:
1:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try >to require the original source to get better results.
@ .//auth0-lock/build/auth0-lock.js 1:113-120

when I try to signin with Lock, I get an error message about md5 being unavailable.

I had a message from Gonto to say that the other libraries have already been updated, but I don't see that and am still having issues with them(auth0-angular, auth0-storage and auth0-jwt) - maybe not all of them, I haven't had time to debug properly.

It would really help if there was an example angular/webpack app including all four libraries :)

[cristiandouce]

We dont have auth0-angular in the example...

Doesthe example with webpack under thr rxamples folder work for you?

If it does then we can scale the issue to debug auth0-angluar instead of lock.

[kpgarrod]

@cristiandouce yes, the example works correctly for me.

[cristiandouce]

@kpgarrod cool then. Would you mind open an issue there then, with more detail on your configuration for using webpack with auth0-angular?

Also, if you have a seed project that reproduces the bug it would help to debug.