0

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.

7
  • Já tentou chamar o arquivo js dentro da tag script? Commented 3/05/2019 às 17:37
  • Sem utilizar o mix() ? Commented 3/05/2019 às 18:29
  • Eu, particularmente uso assim <script src="{{ URL('admin/js/pages/manifest.js') }}"> </script> só meus arquivos ficam na pasta public Commented 3/05/2019 às 18:34
  • Alterando para <script type="text/javascript" src="{{ URL('/admin/vendors/js/global_vendors.bundle.js') }}"></script> não resolveu... =/ Commented 3/05/2019 às 19:25
  • Mas você está importando o jquery-3 antes dessa linha ai? Commented 3/05/2019 às 19:26

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .