Logo Logo

Documentation v3.0.8

  • Home
  • Customization
  • No jQuery
Preview
Light
Dark
System

Overview

All of our products does not contain any jQuery within the core layout and components. However, the below listed plugins require, which is the main reason for jQuery's inclusion.
After jQuery and above jQuery plugins removal, some pages might not function as expected and throw $ is not defined reference errors. However, the core layout and components function as expected without any issue.

Remove jQuery

Locate the package.json file within the tools folder: /theme/html/tools/ and remove below dependencies under dependencies node: 
"dependencies": {
    "jquery": "3.6.0",
    "jquery.repeater": "^1.2.1",
    "jstree": "^3.3.11",
    "select2": "^4.1.0-rc.0",
    "flot": "^4.2.2",
    "bootstrap-select": "^1.13.18",
    "bootstrap-multiselectsplitter": "^1.0.4",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-maxlength": "^1.10.1",
    "datatables.net": "^1.12.1",
    "datatables.net-bs5": "^1.12.1",
    "datatables.net-buttons": "^2.2.3",
    "datatables.net-buttons-bs5": "^2.2.3",
    "datatables.net-colreorder": "^1.5.6",
    "datatables.net-colreorder-bs5": "^1.5.6",
    "datatables.net-datetime": "^1.1.2",
    "datatables.net-fixedcolumns": "^4.1.0",
    "datatables.net-fixedcolumns-bs5": "^4.1.0",
    "datatables.net-fixedheader": "^3.2.3",
    "datatables.net-fixedheader-bs5": "^3.2.3",
    "datatables.net-plugins": "^1.11.5",
    "datatables.net-responsive": "^2.3.0",
    "datatables.net-responsive-bs5": "^2.3.0",
    "datatables.net-rowgroup": "^1.2.0",
    "datatables.net-rowgroup-bs5": "^1.2.0",
    "datatables.net-rowreorder": "^1.2.8",
    "datatables.net-rowreorder-bs5": "^1.2.8",
    "datatables.net-scroller": "^2.0.6",
    "datatables.net-scroller-bs5": "^2.0.6",
    "datatables.net-select": "^1.4.0",
    "datatables.net-select-bs5": "^1.4.0",
}

Gulp Config

Locate the gulp config file within the tools folder: /theme/html/tools/gulp.config.js and remove below dependencies one by one: 
const gulpConfig = {
    build: {
        plugins: {
            global: {
                src: {
                    mandatory: {
                        jquery: {
                            scripts: ["{$config.path.node_modules}/jquery/dist/jquery.js"],
                        }
                    }
                }
            },
            optional: {
                select2: {
                    styles: [
                        "{$config.path.node_modules}/select2/dist/css/select2.css",
                    ],
                    scripts: [
                        "{$config.path.node_modules}/select2/dist/js/select2.full.js",
                        "{$config.path.common_src}/js/vendors/plugins/select2.init.js",
                    ],
                },
                "bootstrap-maxlength": {
                    "scripts": [
                        "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
                    ]
                },
                daterangepicker: {
                    styles: [
                        "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css",
                    ],
                    scripts: [
                        "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js",
                    ],
                },
                inputmask: {
                    scripts: [
                        "{$config.path.node_modules}/inputmask/dist/bindings/inputmask.binding.js"
                    ]
                },
                "bootstrap-multiselectsplitter": {
                    scripts: [
                        "{$config.path.node_modules}/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.js",
                    ],
                },
                toastr: {
                    styles: ["{$config.path.common_src}/plugins/toastr/build/toastr.css"],
                    scripts: ["{$config.path.common_src}/plugins/toastr/build/toastr.min.js"],
                },
            }
        },
        custom: {
            "datatables.net": {
                src: {
                    styles: [
                        "{$config.path.node_modules}/datatables.net-bs5/css/dataTables.bootstrap5.css",
                        "{$config.path.node_modules}/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-select-bs5/css/select.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-datetime/dist/dataTables.dateTime.min.css",
                    ],
                    scripts: [
                        "{$config.path.node_modules}/datatables.net/js/jquery.dataTables.js",
                        "{$config.path.node_modules}/datatables.net-bs5/js/dataTables.bootstrap5.js",
                        "{$config.path.common_src}/js/vendors/plugins/datatables.init.js",
                        "{$config.path.node_modules}/jszip/dist/jszip.min.js",
                        "{$config.path.node_modules}/pdfmake/build/pdfmake.min.js",
                        "{$config.path.node_modules}/pdfmake/build/vfs_fonts.js",
                        "{$config.path.node_modules}/datatables.net-buttons/js/dataTables.buttons.min.js",
                        "{$config.path.node_modules}/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js",
                        "{$config.path.node_modules}/datatables.net-buttons/js/buttons.colVis.js",
                        "{$config.path.node_modules}/datatables.net-buttons/js/buttons.flash.js",
                        "{$config.path.node_modules}/datatables.net-buttons/js/buttons.html5.js",
                        "{$config.path.node_modules}/datatables.net-buttons/js/buttons.print.js",
                        "{$config.path.node_modules}/datatables.net-colreorder/js/dataTables.colReorder.min.js",
                        "{$config.path.node_modules}/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
                        "{$config.path.node_modules}/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
                        "{$config.path.node_modules}/datatables.net-fixedheader-bs5/js/fixedHeader.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-responsive/js/dataTables.responsive.min.js",
                        "{$config.path.node_modules}/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js",
                        "{$config.path.node_modules}/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
                        "{$config.path.node_modules}/datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
                        "{$config.path.node_modules}/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-scroller/js/dataTables.scroller.min.js",
                        "{$config.path.node_modules}/datatables.net-scroller-bs5/js/dataTables.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-select/js/dataTables.select.min.js",
                        "{$config.path.node_modules}/datatables.net-select-bs5/js/dataTables.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-datetime/dist/dataTables.dateTime.min.js",
                        "{$config.path.node_modules}/datatables.net-plugins/features/conditionalPaging/dataTables.conditionalPaging.js",
                    ]
                },
                dist: {
                    styles: "{$config.dist}/plugins/custom/datatables/datatables.bundle.css",
                    scripts: "{$config.dist}/plugins/custom/datatables/datatables.bundle.js",
                }
            },
            flot: {
                src: {
                    scripts: [
                        "{$config.path.node_modules}/flot/dist/es5/jquery.flot.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.resize.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.categories.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.pie.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.stack.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.crosshair.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.axislabels.js"
                    ]
                },
                dist: {
                    scripts: "{$config.dist}/plugins/custom/flotcharts/flotcharts.bundle.js"
                }
            },
            jstree: {
                src: {
                    styles: [
                        "{$config.path.node_modules}/jstree/dist/themes/default/style.css"
                    ],
                    scripts: [
                        "{$config.path.node_modules}/jstree/dist/jstree.js"
                    ],
                    images: [
                        "{$config.path.common_src}/media/plugins/jstree/32px.png",
                        "{$config.path.node_modules}/jstree/dist/themes/default/throbber.gif"
                    ]
                },
                dist: {
                    styles: "{$config.dist}/plugins/custom/jstree/jstree.bundle.css",
                    scripts: "{$config.dist}/plugins/custom/jstree/jstree.bundle.js",
                    images: "{$config.dist}/plugins/custom/jstree/images/jstree"
                }
            },
            formrepeater: {
                src: {
                    scripts: [
                        "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                        "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                        "{$config.path.node_modules}/jquery.repeater/src/repeater.js"
                    ]
                },
                dist: {
                    scripts: "{$config.dist}/plugins/custom/formrepeater/formrepeater.bundle.js",
                }
            },
            "bootstrap-select": {
                src: {
                    styles: [
                        "{$config.path.node_modules}/bootstrap-select/dist/css/bootstrap-select.css",
                    ],
                    scripts: [
                        "{$config.path.node_modules}/bootstrap-select/dist/js/bootstrap-select.min.js",
                    ]
                },
                dist: {
                    styles: "{$config.dist}/plugins/custom/bootstrap-select/bootstrap-select.bundle.css",
                    scripts: "{$config.dist}/plugins/custom/bootstrap-select/bootstrap-select.bundle.js",
                }
            }
        }
    }
}

Webpack Config

  1. Locate the webpack javascript plugins config file within the tools folder: /theme/html/tools/webpack/plugins/plugins.js and remove below dependencies one by one: 
    window.jQuery = window.$ = require('jquery');
require('bootstrap-daterangepicker/daterangepicker.js');
require('bootstrap-maxlength/src/bootstrap-maxlength.js');
require('@/src/plugins/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js');
require('select2/dist/js/select2.full.min.js');
require('inputmask/dist/bindings/inputmask.binding.js');
require('@/src/js/vendors/plugins/select2.init.js');
window.toastr = require('@/src/plugins/toastr/build/toastr.min.js');
window.sessionTimeout = require('@/src/plugins/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js');
require('@/src/plugins/jquery-idletimer/idle-timer.min.js');
}
  2. Locate the webpack plugins sass config file within the tools folder: /theme/html/tools/webpack/plugins/plugins.scss and remove below dependencies one by one: 
    @import "~select2/src/scss/core.scss";
@import "~bootstrap-daterangepicker/daterangepicker.css";
@import "~@/src/plugins/toastr/build/toastr.css";
  3. Locate the webpack main config file within the tools folder: /theme/html/tools/webpack.config.js and remove below datatables plugin dependencies completely under importExtraPlugins function: 
    // datatables
files: {
    'plugins/custom/datatables/datatables.bundle.js': [
        "node_modules/datatables.net/js/jquery.dataTables.js",
        "node_modules/datatables.net-bs5/js/dataTables.bootstrap5.js",
        "../src/js/vendors/plugins/datatables.init.js",
        "node_modules/jszip/dist/jszip.min.js",
        "node_modules/pdfmake/build/pdfmake.min.js",
        "node_modules/pdfmake/build/vfs_fonts.js",
        "node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
        "node_modules/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js",
        "node_modules/datatables.net-buttons/js/buttons.colVis.js",
        "node_modules/datatables.net-buttons/js/buttons.flash.js",
        "node_modules/datatables.net-buttons/js/buttons.html5.js",
        "node_modules/datatables.net-buttons/js/buttons.print.js",
        "node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js",
        "node_modules/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.js",
        "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
        "node_modules/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.js",
        "node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
        "node_modules/datatables.net-fixedheader-bs5/js/fixedHeader.bootstrap5.js",
        "node_modules/datatables.net-responsive/js/dataTables.responsive.min.js",
        "node_modules/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js",
        "node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
        "node_modules/datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js",
        "node_modules/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
        "node_modules/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.js",
        "node_modules/datatables.net-scroller/js/dataTables.scroller.min.js",
        "node_modules/datatables.net-scroller-bs5/js/dataTables.bootstrap5.js",
        "node_modules/datatables.net-select/js/dataTables.select.min.js",
        "node_modules/datatables.net-select-bs5/js/dataTables.bootstrap5.js",
        "node_modules/datatables.net-datetime/dist/dataTables.dateTime.min.js",
    ],
    'plugins/custom/datatables/pdfmake.min.js.map': [
        'node_modules/pdfmake/build/pdfmake.min.js.map',
    ],
    'plugins/custom/datatables/datatables.bundle.css': [
        "node_modules/datatables.net-bs5/css/dataTables.bootstrap5.css",
        "node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css",
        "node_modules/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css",
        "node_modules/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css",
        "node_modules/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css",
        "node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
        "node_modules/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css",
        "node_modules/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css",
        "node_modules/datatables.net-select-bs5/css/select.bootstrap5.min.css",
        "node_modules/datatables.net-datetime/dist/dataTables.dateTime.min.css",
    ]
}
  4. Remove following dependencies folders in /theme/html/tools/webpack/plugins/custom folder:
    • floatchart
    • formrepeater
    • jstree
  5. Remove following plugins js and css includes from the HTML templates:
    • assets/plugins/custom/datatables/datatables.bundle.css
    • assets/plugins/custom/datatables/datatables.bundle.js

Rebuild

Remove theme/html/tools/node_modules folder and theme/html/tools/yarn.lock in file the tools folder and reinstall packages and build the assets with Gulp  or Webpack.
try metronic buy mega bundle
Preview Get Help Buy Now