Laravel Mix Uncaught ReferenceError: $ is not defined答案

【问题标题】：Laravel Mix Uncaught ReferenceError: $ is not definedLaravel Mix Uncaught ReferenceError: $ is not defined
【发布时间】：2019-01-22 23:31:54
【问题描述】：

我已经搜索和搜索，但在 SO 上找不到我的问题的答案。所以这是我的问题。我正在尝试使用 Laravel Mix 全局加载 jQuery。我尝试修改各种文件，但似乎没有任何效果...我仍然收到“$ 未定义”错误。

这是我的代码。

Bootstrap.js

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/select2.min.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/admin/app.scss', 'public/css/admin')
   .copy('resources/assets/css/fontawesome.css', 'public/css')
   .copy('resources/assets/css/select2.min.css', 'public/css')
   .copy('resources/assets/webfonts', 'public/webfonts')
   .copy('resources/assets/js/tinymce', 'public/js/tinymce');

mix.browserSync('http://localhost:8000');

我得到的错误：

未捕获的引用错误：$ 未定义

@section('scripts') 中 create.blade.php 内部的代码

<script>
   $(function(){
        alert();
    });
</script>
{{-- Tiny MCE --}}
<script src="/js/tinymce/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector:'textarea',
        plugins: 'link',
        menubar: false,
        branding: false,
        resize: false,
        statusbar: false,
        force_br_newlines : false,
        force_p_newlines : false,
        forced_root_block : '',
        toolbar:    ['undo redo | cut copy paste | removeformat',
                    'bold italic underline | link | outdent indent | alignleft aligncenter alignright alignjustify alignnone',],
    });
</script>

{{-- Image Javascript --}}
<script type="text/javascript">
    $(function() {

        // We can attach the `fileselect` event to all file inputs on the page
        $(document).on('change', ':file', function() {
            var input = $(this),
            numFiles = input.get(0).files ? input.get(0).files.length : 1,
            label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            input.trigger('fileselect', [numFiles, label]);
        });

        // We can watch for our custom `fileselect` event like this
        $(document).ready( function() {
            $(':file').on('fileselect', function(event, numFiles, label) {

            var input = $(this).parents('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' files selected' : label;

            if( input.length ) {
                input.val(log);
            } else {
                if( log ) alert(log);
            }

            });
        });

    });
</script>

最后是我的布局文件

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

        {{-- Page Specific Scripts --}}
        @yield('scripts')

    </body>

我做错了什么？！？！？

Console.log(e) 什么都不返回...这意味着 jquery 应该正确加载但不是。

【问题讨论】：

发现错误..？
从简短的角度来看，尝试在不依赖 jQuery 的情况下在加载时包装您的代码。也许它会在那一点上中断
@Teemu 我该怎么做？
??您已将 jQuery 加载包装到 try..catch，如果碰巧有错误消息，为什么不记录错误消息。
那个 try catch 已经在那里了......我没有写那个......它已经安装了 laravel

标签： javascript php jquery laravel laravel-mix

【解决方案1】：

如果你在 laravel mix 中使用 jquery，请在你的 app.js 中导入这种方式：

window.$ = window.jQuery = require('jquery');

【讨论】：

这在 laravel 6 中不再起作用。我在 bootstrap.js 行：try { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap'); } catch (e) {} 仍然有这个问题
@Sebastian 尝试将其更改为 global.$ = global.jQuery = require('jquery');

【解决方案2】：

我在 Laravel 6 上遇到了同样的问题。你可以做两件事...

或者从脚本标签中去掉dedefer；

<script src=”{{ asset(‘js/app.js’) }}” defer></script>

应该是：

<script src=”{{ asset(‘js/app.js’) }}"></script>

或者像这样在你的 Blade 模板中加载事件后使用 jQuery；

<script>
window.addEventListener('load', function() {
   console.log($);
});
</script>

脚本标记中的defer 属性用于当您希望在页面被完全解析后执行脚本时。因此，只有在页面加载完毕且脚本完全加载后，您才能使用已加载的脚本。

【讨论】：

【解决方案3】：

我在 laravel 中使用 jquery 时遇到了同样的错误。我已经通过 npm npm install jquery 安装 jquery 解决了这个问题，然后我在我需要的脚本中导入了 jquery，如下所示：

import $ from "jquery";

然后$ 将在 js 文件中可用。之后我在 entry-point.js 中调用了我的 js 文件并运行 npm run dev

【讨论】：