zxcvbn is not defined
mloginov opened this issue · 8 comments
It happens if you are adding content in runtime(use tabs for example).
In this case
window.attachEvent("onload",a):window.addEventListener("load",a,!1)
will not work because page already loaded and script will not be loaded.
if you load zxcvbn before the component is instantiated, it will use that instead of the async load you referenced above. So you can load zxcvbn on your own at any time prior. Will that fix your issue?
If not, let me know and we'll see what we can do.
Yes. It helps.
Now I'll load it by inserting following code in my index.html
<script>(function(){var a;a=function(){var a,b;b=document.createElement("script");b.src="//cdnjs.cloudflare.com/ajax/libs/zxcvbn/1.0/zxcvbn.js";b.type="text/javascript";b.async=!0;a=document.getElementsByTagName("script")[0];return a.parentNode.insertBefore(b,a)};null!=window.attachEvent?window.attachEvent("onload",a):window.addEventListener("load",a,!1)}).call(this);</script>
This problem is breaking our app. We browserify zxcvbn but we still see this error Uncaught ReferenceError: zxcvbn is not defined thrown at https://github.com/seethroughtrees/react-ux-password-field/blob/master/src/index.js#L154
IMO this check is not so good. We already are passing on a valid zxcvbn function through the props.zxcvbn, so that should let it through.
For now I have to do this to circumvent the above error:
var zxcvbn = require('zxcvbn-npm');
window.zxcvbn = zxcvbn;@binarykitchen please check now, from the master branch. I haven't pushed to npm yet, as I want to make sure it solves the problem first.
The above error is gone but for weird reasons the graphics in .passwordField__info (infoBar) aren't updated anymore upon changes.
It is difficult to debug your code because there is a fundamental mistake: in package.json you point the main source to an already webpacked version, see https://github.com/seethroughtrees/react-ux-password-field/blob/master/package.json#L4
The main source code should be always the plain source, uncompressed, not webpacked nor browserified. In our app, we include your code and run webpack altogether. That's not your job.
But if you want to deliver compressed, webpacked code, you can place them i.E. in a /dist/ folder. But any require('react-ux-password-field)` calls should load the original source code.
That change will make it much easier for me to debug the above issue.
Definitely understood. Thanks for pointing it out. I've pushed up an updated package.json to master. If you're satisfied with it, i'll bump it in npm.
yes, that's much better!!