Issues with latest release 2.4.3

[kambojankit]

I am working with the library for the first time, configuring it doesn't seem to be working. I have setup the the library to work with angular, and configuration are as below:

but getting below error:

$('#builder').queryBuilder({
            filters: [
                {
                    id: 'name',
                    label: 'Name',
                    type: 'string'
                }, 
                {
                    id: 'in_stock',
                    label: 'In stock',
                    type: 'integer',
                    input: 'radio',
                    values: {
                        1: 'Yes',
                        0: 'No'
                    },
                    operators: ['equal']
                }, 
                {
                    id: 'price',
                    label: 'Price',
                    type: 'double',
                    validation: {
                        min: 0,
                        step: 0.01
                    }
                }, 
                {
                    id: 'id',
                    label: 'Identifier',
                    type: 'string',
                    placeholder: '____-____-____',
                    operators: ['equal', 'not_equal'],
                    validation: {
                        format: /^.{4}-.{4}-.{4}$/
                    }
                }
            ],

            rules: {
                condition: 'AND',
                rules: [
                    {
                        id: 'price',
                        operator: 'less',
                        value: 10.25
                    }, 
                    {
                        condition: 'OR',
                        rules: [
                            {
                                id: 'category',
                                operator: 'equal',
                                value: 2
                            }, 
                            {
                                id: 'category',
                                operator: 'equal',
                                value: 1
                            }
                        ]
                    }
                ]
            }
        });

But i get the below error

TypeError: Cannot read property 'template' of undefined
at QueryBuilder.
at Array.forEach (native)

I tried bypassing it by providing templates: [] , but that leads to another error as below:

TypeError: this.templates.group is not a function
at QueryBuilder.getGroupTemplate (vendor.bundle.js:127034)
at QueryBuilder.setRoot (vendor.bundle.js:125226)
at QueryBuilder.setRules (vendor.bundle.js:126177)
at new QueryBuilder

Can you please point me to the right direction.

[mistic100]

That's too few info to help you. I need to know how you load everything. Create a jsfiddle/plunkr as asked when you open an issue.

[ozzyogkush]

I'm seeing this issue when using the standalone version with Node and Webpack, though the issue persists across all 2.4.* versions that are in NPM.

import $ from 'jquery';
import doT from 'dot/doT';
import QueryBuilder from 'jQuery-QueryBuilder/dist/js/query-builder.standalone';

$(function() {
  $('#query-builder').queryBuilder({
    filters: [{
      id: 'tags',
      label: 'Tags',
      type: 'string',
      operators: ['equal', 'not_equal', 'in', 'not_in']
    }]
  });
});

Results in the following error in the console:

Uncaught TypeError: Cannot read property 'template' of undefined
at QueryBuilder.<anonymous>
at Array.forEach (native)
at new QueryBuilder
at jQuery.fn.init.$.fn.queryBuilder
at HTMLDocument.
at mightThrow
at process

That is line 415 this.templates[tpl] = doT.template(this.templates[tpl]); of the dist/js/query-builder.standalone.js in the package downloaded by NPM. I do have a <div id="query-builder"></div> on the page. I have a feeling that the doT package is not being included or injected correctly.

I get a whole ton of other dependency issues when I try using the dist/js/query-builder.js instead. Your package.json is missing the name and main properties also, which may be part of it.

[mistic100]

Well that clearly means doT is not loaded.

The standalone version cannot work with CommonJS because it tries to export three things (extendext, doT and QueryBuilder).

Use the non-standalone version and add jquery-extendext and dot to your build.

---

I do plan to migrate the sources to CommonJS to directly supports Webpack but not right now.

[ozzyogkush]

When I use non-standalone as such:

import doT from 'dot/doT';
import jQueryExtendext from 'jquery-extendext';
import QueryBuilder from 'jQuery-QueryBuilder/dist/js/query-builder';

this is what I get during the build (same if I use require syntax instead of import syntax):

ERROR in ./~/jQuery-QueryBuilder/dist/js/query-builder.js
Module not found: Error: Can't resolve 'jQuery.extendext' in 'FOLDER/node_modules/jQuery-QueryBuilder/dist/js'
 @ ./~/jQuery-QueryBuilder/dist/js/query-builder.js 8:8-62

and

ERROR in ./~/doT/index.js
Module not found: Error: Can't resolve 'fs' in 'FOLDER/node_modules/doT'
 @ ./~/doT/index.js 30:9-22
 @ ./~/jQuery-QueryBuilder/dist/js/query-builder.js

That stems from importing the file incorrectly: your code does define(['jquery', 'doT', 'jQuery.extendext'], factory); when it should probably do define(['jquery', 'dot/doT', 'jquery-extendext'], factory);

[ozzyogkush]

When I manually change that line as suggested to define(['jquery', 'dot/doT', 'jquery-extendext'], factory); in the dist/js/query-builder.js file and import like:

//import doT from 'dot/doT';
//import jQueryExtendext from 'jquery-extendext';
import QueryBuilder from 'query-builder';

in my source code, it works as expected. Should I put in a fix in a pull request or are there other considerations?

[mistic100]

Right, doT main files changed a while ago to a Node specific one and I messed up for extendext.

I will make the change in .wrapper.js and also add the CommonJS part, it should fix it for now before cleaning up the sources (which could take advantage of the tree shaking if one does not use all plugins).

[oller]

@ozzyogkush , not sure if it's any use - but a workaround for this (until fix released) without editing files in your node_modules dir, which is never sustainable, is just to add a couple of resolve.alias values to your webpack config to get webpack to resole these paths correctly:

    resolve: {
        alias: {
            "jQuery.extendext": "jquery-extendext/jQuery.extendext.js",
            "dot": "dot/doT.js"
        }
    },