web-dev-qa-db-fra.com

Laravel 5 WebPack JQuery - $ n'est pas défini

J'ai webpack.min.js:

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default'],
            })
        ]
    };
});

mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
    .js('resources/assets/scripts/index.js', 'public/js/app.js')
    .copyDirectory('resources/assets/static', 'public/static')
    .version()
    .sourceMaps();

et package.json:

"devDependencies": {
    "jquery": "^3.3.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "bootstrap-datepicker": "^1.7.1",
    "browser-sync": "^2.24.6",
    "browser-sync-webpack-plugin": "^2.0.1",
    "chart.js": "^2.7.2",
    "cross-env": "^5.2.0",
    "datatables": "^1.10.18",
    "easy-pie-chart": "^2.1.7",
    "font-awesome": "4.7.0",
    "fullcalendar": "^3.9.0",
    "jquery-sparkline": "^2.4.0",
    "jvectormap": "^2.0.4",
    "laravel-mix": "^2.1.11",
    "load-google-maps-api": "^1.2.0",
    "lodash": "^4.17.10",
    "masonry-layout": "^4.2.2",
    "perfect-scrollbar": "^1.1.0",
    "popper.js": "^1.14.3",
    "skycons": "^1.0.0",
    "vue": "^2.5.16"
  }

et dans mon script de pied de page de lame:

@section('footer')
    <script type="text/javascript">
        if (typeof jQuery != 'undefined') { alert(jQuery.fn.jquery); }

        $(function() {
        $('#cc-number').validateCreditCard(function(result) {
            $('.log').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
                + '<br>Valid: ' + result.valid
                + '<br>Length valid: ' + result.length_valid
                + '<br>Luhn valid: ' + result.luhn_valid);
        });
        });
    </script>
@endsection

après avoir exécuté npm run dev et chargé ma page, je reçois une erreur:

Uncaught ReferenceError: $ n'est pas défini

et ma alert(jQuery.fn.jquery); n'est pas déclenchée

comment puis-je charger jquery depuis npm pour que je puisse l'utiliser avec du code html en ligne dans blade?

jquerylaravellaravel-5webpacklaravel-5.6
4
AnD

Essayez ceci dans votre fichier main.js

global.$ = global.jQuery = require('jquery');
13
Odyssee

J'ai eu ce problème dans Laravel 5.7 lorsque j'ai essayé d'utiliser certaines des vues par défaut qu'il fournissait. J'essayais d'utiliser JavaScript (qui nécessitait l'utilisation de jQuery) dans certains modèles de vue de lame qui étendaient la valeur par défaut layout/app.blade.php template.

Mais pour moi, le problème n'était pas le window.$ N'étant pas affecté à la bibliothèque window.jQuery, car il était ajouté en ce qui concerne le fichier resources/js/bootstrap.js. (Il s'agit d'un fichier qui semble être précompilé en public/js/app.js Par Laravel Mix. Vous pouvez voir que c'est le cas en examinant webpack.mix.js, En son sein, vous trouverez cette déclaration:

mix.js('resources/js/app.js', 'public/js')

où

resources/js/app.js Nécessite resources/js/bootstrap.js.

Si vous souhaitez compiler manuellement pour vous-même la première exécution:

npm install Puis npm run dev En mode développement ou npm run prod En mode production.

mais de toute façon (j'ai digressé) ....

Il s'est avéré que le problème était ici:

resources/views/layouts/app.blade.php

Il y avait une instance de balise de script avec un attribut defer comme ceci:

<script src="{{ asset('js/app.js') }}" defer></script>

Cet attribut defer était à l'origine de tous les problèmes.

Je l'ai donc retiré comme ceci:

<script src="{{ asset('js/app.js') }}"></script>

et le problème de jQuery non défini a été résolu.

Je préfère différer mon chargement JavaScript en déplaçant simplement les balises de script plus près de la fin de la balise HTML body de toute façon.

9
racl101

dans app.blade.php

<script src="{{ asset('js/app.js') }}" defer></script>

retirer le report alors faites-le

<script src="{{ asset('js/app.js') }}" ></script>

https://github.com/laravel/framework/issues/17634#issuecomment-37547399

7
Ahmed Aboud

J'utilise mix.copy à la place mix.js pour jQuery et cela fonctionne très bien!

exemple:

mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/vendor/jquery/jquery.min.js');
1
Денис Кисель