Laravel è oramai giunto alla versione 8. Ciò nonostante, con alcune configurazioni, si trascina dietro un problema derivante dalla versione 5. Risolvere un errore quale ReferenceError: $ is not defined o jQuery is not defined appare un monte insormontabile. In poche parole jQuery non vuole saperne di venire caricato correttamente e risulta non disponibile al browser.
ReferenceError: $ is not defined o jQuery is not defined
Il problema di fondo è webpack, l’utility che Laravel utilizza per la generazione del js e del css compressi della nostra applicazione.
Pare incartarsi su alcuni pacchetti installati da npm e generare un app.js fallato.
Per risolvere, ci possono essere diverse procedure che elenco schematicamente di seguito.
Webpack
Nella root del progetto Laravel, aprire con il proprio IDE il file webpack.mix.js.
Facendo attenzione a non demolire il file medesimo, inserire in coda a quanto già presente:
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'
})
]
};
})
A questo punto cancellare la cache di Webpack con: npm cache clean --force
Ricompilare i file app.js e app.css con npm run dev o con npm run watch .
Caricamento file Javascript
Potrebbe essere necessario – lato Blade – aprire il file resources/view/layouts/app.blade.php ed in esso spostare la riga:
<script src="{{ asset('js/app.js') }}" type="text/js"></script>
Tale riga andrebbe posizionata prima della chiusura del tag{wc_code}</body>{/wc_code}
Potrebbe essere necessario anche eliminare dalla succitata riga il parametro defer, se presente.
Infine, spostare tutti gli altri js subito sotto quella riga. Lavorare sugli eventuali defer di modo che tutto il resto della pagina sia caricato prima degli script js stessi.
Segui @andymnc (Andrea Manconi) su Twitter per essere sempre aggiornato su guide ed articoli
