jQuery plugins not working when using webpack. What is correct way to use it?

65
July 20, 2018, at 10:10 PM

I was try yo use webpack in my development. I use npm, install jquery and some plugins (YTPlayer, fancybox). Webpack entry file is template.js, my test script is web.js (there are plugins calling). jQuery is working fine, but when i call plugins, i see TypeError: s(...).plugin is not a function... template.js is compiling fine, i saw jquery and plugins there, but its not allowed in web.js.

This is package.json:

{ 
  "name": "greenkey4", 
  "version": "1.0.0", 
  "main": "code/template.js", 
  "dependencies": { 
    "@fancyapps/fancybox": "^3.3.5", 
    "bootstrap": "^4.1.1", 
    "jquery": "^3.3.1", 
    "jquery.mb.ytplayer": "^3.2.2", 
    "popper.js": "^1.14.3" 
  }, 
  "devDependencies": { 
    "autoprefixer": "^8.6.4", 
    "css-loader": "^0.28.11", 
    "file-loader": "^1.1.11", 
    "node-sass": "^4.9.0", 
    "postcss-loader": "^2.1.5", 
    "sass-loader": "^7.0.3", 
    "style-loader": "^0.21.0", 
    "webpack": "^4.13.0", 
    "webpack-cli": "^3.0.8" 
  }, 
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "webpack", 
    "start": "webpack --watch" 
  }, 
  "author": "", 
  "license": "ISC", 
  "description": "" 
}

This is webpack.config.js:

const path = require('path'); 
 
// webpack.config.js 
const webpack = require('webpack') 
 
module.exports = { 
    plugins: [ 
        new webpack.ProvidePlugin({ 
            $: 'jquery', 
            '$': 'jquery', 
            jquery: 'jquery', 
            jQuery: 'jquery', 
            'window.jquery': 'jquery', 
            'window.jQuery': 'jquery', 
            'window.$': 'jquery' 
        }) 
    ], 
    entry: ['./code/template.js', './scss/template.scss'], 
    output: { 
        path: path.resolve(__dirname, 'assets'), 
        filename: 'template.js' 
    }, 
    resolve: { 
        root: ['./node_modules'] 
    }, 
    module: { 
        rules: [ 
            { 
                test: /\.(scss)$/, 
                use: [ 
                    { 
                        loader: 'file-loader', 
                        options: { 
                            name: '[name].css', 
                            outputPath: '' 
                        } 
                    }, 
                    //{ 
                        // Adds CSS to the DOM by injecting a `<style>` tag 
                        // This loader using when disable file-loader, to include css into bundle.js 
                        //loader: 'style-loader' 
                    //}, 
                    //{ 
                        // Interprets `@import` and `url()` like `import/require()` and will resolve them 
                        // This loader using when disable file-loader, to include css into bundle.js 
                        //loader: 'css-loader' 
                    //}, 
                    { 
                        // Loader for webpack to process CSS with PostCSS 
                        loader: 'postcss-loader', 
                        options: { 
                            plugins: function () { 
                                return [ 
                                    require('autoprefixer') 
                                ]; 
                            } 
                        } 
                    }, 
                    { 
                        // Loads a SASS/SCSS file and compiles it to CSS 
                        loader: 'sass-loader' 
                    } 
                ] 
            } 
        ] 
    }, 
    watch: true, 
    devtool: "source-map", 
    // This remove jquery code from bundle to use external CDN 
    externals: { 
        //jquery: 'jQuery' 
    } 
};

This is template.js:

let $ = require('jquery'); 
window.$ = window.jQuery = $; 
import 'bootstrap'; 
import 'jquery.mb.ytplayer'; 
import '@fancyapps/fancybox'; 
import './web';

And file where i using plugins web.js

$(document).ready(function () { 
 
    $("button.offcanvas").click(function (e) { 
        $("body").toggleClass("hide"); 
        e.preventDefault(); 
        return false; 
    }); 
 
    $(".offside").click(function (e) { 
        $("body").toggleClass("hide"); 
        //e.preventDefault(); 
        //return false; 
    }); 
 
    $("#bgndVideo").YTPlayer(); 
 
    $('[data-fancybox="images"]').fancybox({ 
        afterLoad : function(instance, current) { 
            var pixelRatio = window.devicePixelRatio || 1; 
 
            if ( pixelRatio > 1.5 ) { 
                current.width  = current.width  / pixelRatio; 
                current.height = current.height / pixelRatio; 
            } 
        } 
    }); 
 
});

I looking whole internet, tried many solutions, but its not work!

Compiled template.js you can see there: compiled template.js And last thing - fancybox is working, but not from web.js. If i put this in html:

<a data-fancybox="images" href="images/counter/1.jpg"><img src="images/counter/1.jpg" style="width:200px"></a> 
<a data-fancybox="images" href="images/counter/2.jpg"><img src="images/counter/2.jpg" style="width:200px"></a>

Its working fine.

READ ALSO
Cannot use characters &#39;&lt;&#39; or &#39;&gt;&#39; in jQuery script in WordPress

Cannot use characters '<' or '>' in jQuery script in WordPress

While running my jquery script in wordpress I ran across this weird errorThat does not allow me to use characters '<' or '>' in my script, any surrounding text just disappears during runtime

55
Executing a js file returned inside an ajax response

Executing a js file returned inside an ajax response

I have a HTML5 application which is using jquery 32

28
Jquery : Create parent child list from XML with different nodes

Jquery : Create parent child list from XML with different nodes

I have an XML below which I am using to create a hirarchical tree

56
Spy function inside jquery anonymous function

Spy function inside jquery anonymous function

I'm using Jasmine for unit testingMy file:

39