use webpack JS package in twig file

Question

I'm really beginner in twig and webpack.

I install some packages with yarn and use them inside app.js, but for some reasons I need some method of that packages inside of my twig files. when I try to call a function, get error.

for example I install boostrap-select package and require that in app.js

// app.js

var $ = require('jquery');

require('bootstrap/dist/js/bootstrap');
require('bootstrap-select/dist/js/bootstrap-select');

$(document).ready(function () {

    $('.selectpicker').selectpicker({});
})(jQuery);

everything is fine and work perfect but when call this package function inside of twig file like this

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('b/app.js') }}"></script>
    <script>
        $('.selectpicker').selectpicker({});
    </script>
{% endblock %}

I get error.

Uncaught TypeError: $(...).selectpicker is not a function

after search in google for one day I found out can not do that ... and I must do some extra things ... every examples are around of jQuery.

what about other packages? how define a function from yarn packages globally and use that in twig file.

I try all of this solutions but not work for me

funtionName = require('package path')
window.functionName =  functionName;
global.funtionNmae = functionName;

anyone has any solutions, I just need call a function in twig :(.

Sebastian Radu · Accepted Answer · 2018-08-31 10:58:37Z

2

"This error happens when your code (or some library that you are using) expects $ or jQuery to be a global variable. But, when you use Webpack and require('jquery'), no global variables are set."

Symfony Frontend - FAQ and Common Issues

jQuery and Legacy Applications

// app.js
var $ = require('jquery');
// ...
global.$ = global.jQuery = $;

answered Aug 31, 2018 at 10:58

Sebastian Radu

763 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Farshadi Over a year ago

Thanks for your answer, but my problem is not about $ or jQuery, jQuery is work fine and I set $ globally, my problem is about any other npm package, like bootstrap-select or my own javascript npm package, how you use function of another packages in your project?

Collectives™ on Stack Overflow

use webpack JS package in twig file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related