Webpack x Symfony 5 – JQuery is not defined

Tonight I decided to start learning to use Webpack and Encore.

Just started and I already got a problem: Jquery does not exist in my templates but it does in my console.

How did i get here:

  • First I downloaded the depencies: composer require symfony/webpack-encore-bundle; yarn install; yarn add jquery --dev
  • Then, I built my assets: yarn encore dev --watch
  • I updated my assets/app.js file so it (should?) imports Jquery: ... import $ from 'jquery'; ...
  • Finally, I wrote my code in my templates/base.html.twig file:
        {{ encore_entry_script_tags('app') }}
        <script type="text/javascript">

            $(document).ready(function(){
                console.log('ok');
            })
        </script>
       {% block javascripts %}{% endblock %}

I did all this following Symfony documentation.

What I tried:

  • I tried playing with the import $ from 'jquery' line, using const, require, and so on…
  • I tried using <script src="{{asset('build/app.js')}}"></script>instead of {{ encore_entry_script_tags('app') }}.
  • I tried to build my assets as prod env instead of dev.

Any of your knowledge is welcome, thank you already.

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *