How to generate bundle?

[damusnet]

Now that browser points to ./dist/strategy.js I am able to build and uglify the bundle.

However, I get the following error: Uncaught ReferenceError: Validator is not defined

You can see the generated bundle extract here.

The lines

    , function(e, t) {
      e.exports = Validator
    }

should actually be

    , function(e, t) {
      e.exports = t
    }

Also, I have been unable to generate a new dist version of strategy. When I run npm run webpack it simply copies the ./src/strategy.js file over to ./dist/strategy.js without any modification. When I run npm run webpack:dev, it does the same to ./dist/strategy.min.js and outputs the following error:

ERROR in strategy.min.js from UglifyJs
Unexpected token punc «(», expected punc «:» [./src/strategy.js:21,0]

How do you generate your dist files?

[DanFMoore]

I'll have a look more in detail later, but the browser usage requires that validatorjs be available as a global called Validator. If you look in the webpack.config.js in this project, you'll see that's specified in the externals. The dist files in this project are just generated through the webpack npm scripts.

For use in other projects, I just npm install --save it and then webpack it through that project's own webpack config. For an example, see my react tutorial fork - https://github.com/TheChech/react-tutorial

Are you getting those errors by running the npm scripts from this project? What version of node do you have?

[DanFMoore]

Right, I think I see the problem now. dist/strategy.js and dist/strategy.min.js are meant for the browser, so you can't really use them with webpack or browserify or whatever for bundling up into one file. That's why validatorjs isn't included; it's meant to be included separately, like jQuery would for a jQuery plugin.

However, Uglify doesn't support es6 syntax, which is what I've used in the main file - https://github.com/mishoo/UglifyJS2/issues/659. I think what you'll have to do is use babel or something to compile it to es5. That's what I've done with webpack, both within this project and when including it another project and bundling it and other dependencies together.

[damusnet]

Okay, I get it now. I was able to generate the dist files also. My mistake was that I tried to run npm run webpack from inside my project where I had installed react-validatorjs-strategy as a node module. After cloning it on its own it works fine.

So if I understand correctly ./src/strategy.js is an ES6 file, that you have to transpile to use in the browser, and both ./dist/strategy.js and ./dist/strategy.min.js are global browser files?

It would be nice if you also provided an ES5 CommonJS or an UMD dist file that could be consumed by any bundler and not just webpack. Here is an example of those files. I don't fully understand your browser use case so I won't do a PR just yet, and I'll just use a fork of your code that I can easily load with Gulp/Browserify/Babelify.

Thanks for your help, you can probably close this issue for now.

[jurassix]

I agree this repo should be a CommonJS module easily consumable as an NPM dependency. Consuming libraries via <script> tags should be reserved for prototyping / CodePens.

@TheChech you should try to patch this lib to support both Webpack and Browserify. If you need help add me as a reviewer or I could even submit a PR for this.

[DanFMoore]

OK fair enough, I'll remove the ES6 syntax. I won't use that patch verbatim though as some of the generated code is a bit ugly.

[DanFMoore]

Discard that last comment, that's what I get for not reading stuff properly, I'll apply the patch.

[DanFMoore]

OK that's been applied and re-published. Does one of you want to update the documentation? I've not used any of these build systems apart from webpack.

[jurassix]

I'll check it out with Browserify and report pack.

[ashlux]

I'm getting the exact same problem with the latest version that was just released (1.0.7). I'm not terribly familiar with webpack or browserify but I'll try and be as helpful as I can. I've tried both of these approaches:

import validationStrategy from 'react-validatorjs-strategy'; let validationStrategy = require('react-validatorjs-strategy');

Both load the same strategy.js, the one that is 2 days old, and not the recently added strategy-cjs.js or strategy-umd.js files. If i replace strategy.js with strategy-*.js then I'm good and stop receiving this error in the browser:

Uncaught ReferenceError: Validator is not defined (anonymous function) @ strategy.js:232 webpack_require @ strategy.js:20 module.exports @ strategy.js:62 webpack_require @ strategy.js:20 Object.create.constructor.value @ strategy.js:40 (anonymous function) @ strategy.js:43 webpack_require @ bootstrap 7e4dd6f982b02edbebe9:19