Bom dia galera. Estou a algum tempo tentando resolver isso mas sem sucesso.
Parece que o jQuery não está sendo carregado ou atribuído em $
, jQuery
.
Abaixo segue alguns trechos do código para ilustrar melhor como tentei incluir o jQuery.
----- Package.json -----
"devDependencies": {
"jquery": "^3.4.1",
----- O .extract()
no webpack.mix.js -----
const mix = require('laravel-mix');
let webpack = require('webpack');
mix.sass('resources/admin/sass/app.scss', 'admin/css/app.css')
.sass('resources/admin/sass/vendors/vendors.scss', 'admin/vendors/css/vendors.bundle.css')
.scripts(
[
...
],
'public/admin/js/scripts.bundle.js'
)
.extract(
[
'jquery', 'popper.js', 'bootstrap', 'js-cookie', 'moment', 'tooltip.js',
'perfect-scrollbar', 'sticky-js', 'wnumb'
],
'admin/vendors/js/global_vendors.bundle.js'
)
.version();
mix.webpackConfig({
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery',
Popper: 'popper.js',
moment: 'moment'
})
],
});
E no HTML acima da tag de fechamento </body>
:
<script src="{{ mix('/admin/js/pages/manifest.js') }}" type="text/javascript"></script>
<script src="{{ mix('/admin/vendors/js/global_vendors.bundle.js') }}" type="text/javascript"></script>
<script src="{{ mix('/admin/js/scripts.bundle.js') }}" type="text/javascript"></script>
Após todas as tentativas ainda da erro no scripts.bundle.js
que é o último a ser carregado:
Uncaught ReferenceError: $ is not defined
at scripts.bundle.js?id=d7fb6ba275af3d7aacaf:334
A linha que da erro é um $(document).ready(function() {...})
.
Obs. 1: Se eu colocar o link do CDN do jQuery antes de todos os scripts tudo funciona.
Obs. 2: Utilizando o require
no './bootstrap.js' no app.js
e adicionando o app.js
no HTML funciona.
Obs. 3: Os comandos em jQuery no console do navegador também dão o mesmo erro.
Estou faz tempo tentando entender pq com o webpack não da certo.
Agradeço a ajuda.
mix()
?<script src="{{ URL('admin/js/pages/manifest.js') }}"> </script>
só meus arquivos ficam na pasta public<script type="text/javascript" src="{{ URL('/admin/vendors/js/global_vendors.bundle.js') }}"></script>
não resolveu... =/