How to use jQuery-Plugins w/Webpack?

Hi everyone,

I just created a new Laravel 5.3 app and I wonder how I include any jQuery Plugins (installed via npm) like fancyBox?

My current setup looks like this:

// gulpfile.js

elixir(mix => {
    mix.webpack('app.js');
});

// app.js

require('./bootstrap');

$(document).ready(function () {
    $('.js-show-modal').fancybox();
});

// bootstrap.js

window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
require('fancybox');

Unfortunately, this doesn't work: 'Uncaught TypeError: $(...).fancybox is not a function'

Can you give me any tips on how to properly use plugins like this?

Thanks in advance!!

bugsysha

9 years ago

Level 61

Have you tried what is specified on the site you've linked ( https://www.npmjs.com/package/fancybox )?

// home.html
<div class="fancybox-me"><h2>Ain't this a fancy box?</h2></div>
 
// main.js (1)
var $ = require('jquery');
require('fancybox')($); <------- (2)
 
$(document).ready(function() {
    $.fancybox.open($('.fancybox-me'));
});

ejdelmonico

9 years ago

Level 53

Should it be window.fancybox = require('fancybox')($);

onursagir

9 years ago

Level 1

I had the same issue with the owlCarousel plugin and this solved it for me.

window.$ = window.jQuery = require('jquery');

I found the answer on this thread https://laracasts.com/discuss/channels/elixir/jquery-undefined-with-elixir

2 likes

webman

9 years ago

Level 1

also you can define jquery as global in webpack.config.js like that:

new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
})

then fancyBox or other plugins based on jQuery:

var fancybox = require("fancybox")($);

$(document).ready(function() {
    $(".fancybox").fancybox();
});

more here https://github.com/wwwebman/gulp-webpack-starter/blob/master/tasks/helpers/webpackConfig.js

ejdelmonico

9 years ago

Level 53

First, you need to make sure you have a compiled file for Webpack to use...it can't find fragmented files. Next, you need to add an alias to webpack config in order to use the require() statement. Do it like this:

// Before you call mix to process files in webpack.mix.js
mix.webpackConfig({
    resolve: {
        alias: {
            'fancybox': 'path-to-fancybox/fancybox'  // relative to node_modules
        }
    }
});

Now, Webpack should be able to find fancybox.

1 like

Please or to participate in this conversation.