base.html
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
 
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
 
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }} *
        {% endblock %}
    </body>
</html>

page.html
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{% extends 'base.html.twig' %}
 
{% block title %}Hello TaskController!{% endblock %}
 
{% block body %}
....
{% endblock %}
 
 
    {% block javascripts %}
 
    {{ parent() }} 
 
    <script>
        jQuery(document).ready(function() {
 
        });
 
OU AVEC :
/*
        $(document).ready(function() {
 
        });
*/
    </script>
    {% endblock %}


webpack.config.js

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
...
    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })
 
OU AVEC
    // .autoProvidejQuery()

app.js

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
// require jQuery normally
const $ = require('jquery');
 
// create global $ and jQuery variables
global.$ = global.jQuery = $;


yarn encore dev (pas d'erreur)

** dans l'onglet réseau: app.js, runtime.js, app.css sont bien téléchargé !

** dans la console du navigateur :
avec jQuery --> Uncaught ReferenceError: jQuery is not defined
avec $ -> Uncaught ReferenceError: $ is not defined


une idée ?