web-dev-qa-db-ja.com

Laravel 5.5 ReferenceError：$が定義されていません

何らかの理由で、私のjQueryはロードを拒否します。エラーが発生します：

ReferenceError：$が定義されていません

私のテンプレートはviews/layouts/editor.blade.phpにあり、このようにテンプレートの先頭にjQueryをロードしています

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

JQueryがコンソールにロードされていることがわかります。しかし、それでもエラーが発生します。

laravel mixを使用してJavaScriptをコンパイルしていますが、webpack.mix.jsファイルは次のようになっています。

// javascript
mix.js('resources/assets/js/app.js', 'public/js')
   .js('node_modules/jquery/dist/jquery.min.js', 'public/js')
   .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery'],
    });
// css
mix.sass('resources/assets/sass/app.scss', 'public/css')
   .sass('node_modules/bootstrap/scss/bootstrap.scss', 'public/css');

なんでこんなことが起こっているの？

編集：

私のテンプレートファイルは次のようになります。

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
        <!-- Styles -->
        <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <!-- scripts -->
        <script src="{{ asset('js/jquery.min.js') }}"></script>

        <script>
            $(function(){
                alert();
            });
        </script>

    </head>
    <body>


        @yield('content')

        <!-- Scripts -->

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

    </body>
</html>

コンソールを見ると、次のように表示されます。

enter image description here

Jquery.min.jsファイルを新しいタブで開くと、次のように表示されます。

enter image description here

つまり、webpackの定型文の下にあるjqueryです。

また、npm run productionを実行しました。これにより、webpackのものがすべて削除され、生のjqueryが残ります。

phpjquerylaravellaravel-5laravel-mix
4
Jethro Hazelhurst

これを試して。ビューファイルで、コンテンツセクションの下にセクションを作成します

@section('scripts')

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script>
       $(function(){
            alert();
        });
</script>
<script src="{{ asset('js/app.js') }}"></script>

@endsection

次に、テンプレートファイルの@yield（ 'content'）のすぐ下にある@yield（ 'scripts'）。だからそのように見える

    <body>

        @yield('content')

        <!-- Scripts -->

       @yield('scripts')

    </body>
2
Jason

問題は、/ srcフォルダーではなくnode_modules/jquery/distフォルダーからjqueryをコンパイルしていたことです。

1
Jethro Hazelhurst

App.jsファイルを含める前に$を使用しています

0
gray

Mix.js（）の代わりにmix.combine（）を使用してください：

mix.combine([
    'node_modules/jquery/dist/jquery.js',
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
],'public/js/outputFile.js');
0
Sóstenes DIas