Webpack about lock HOT 36 CLOSED

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

from lock.

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'
}

from lock.

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

from lock.

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

from lock.

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.

from lock.

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?

from lock.

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

from lock.

That would be very much appreciated!

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

from lock.

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.

from lock.

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

from lock.

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

from lock.

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

from lock.

Can you guys try with v7.5.4 just released?

Thanks a bunch

from lock.

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

from lock.

@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' })

from lock.

@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?

from lock.

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

from lock.

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.

from lock.

@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.

from lock.

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

from lock.

no

from lock.

@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

from lock.

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

from lock.

@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.

from lock.

@kpgarrod can you try like this:

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

from lock.

@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)

from lock.

South Africa

from lock.

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.

from lock.

@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.

from lock.

@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

from lock.

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

from lock.

@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

from lock.

@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 :)

from lock.

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.

from lock.

@cristiandouce yes, the example works correctly for me.

from lock.

@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.

from lock.