Uncaught ReferenceError: $ не определен, но включен jQuery

У меня ошибка, когда я открываю веб-страницу с кодом jQuery.

Uncaught ReferenceError: $ не определен

Я включил jQuery и Bootstrap в app.js и не могу использовать jQuery в представлении.

В app.js

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

import 'bootstrap';

В макете:

<script type="text/javascript" src="{{ asset(mix('js/manifest.js')) }}"></script>
<script type="text/javascript" src="{{ asset(mix('js/vendor.js')) }}"></script>
<script type="text/javascript" src="{{ asset(mix('js/app.js')) }}"></script>
@stack('scripts')

С учетом:

@push('scripts')
    <script type="text/javascript">
        $(function () {
            alert('ok');
            mediumZoom('.embedded_image img');
        });
    </script>
@endpush

Мой webpack.mix.js:

const mix = require('laravel-mix');

if (process.env.NODE_ENV === 'production') {
    mix.disableNotifications();
}

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
    .options({
        uglify: {
            uglifyOptions: {
                compress: {
                    drop_console: true,
                }
            }
        }
    })
    .setPublicPath('public')
    .setResourceRoot('../')
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery', 'window.$', 'jquery', 'window.jquery'],
        tether: ['window.Tether', 'Tether'],
        vue: ['window.Vue', 'Vue'],
        lodash: ['lodash', '_']
    })
    .js('resources/assets/js/app.js', 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css')
    .copyDirectory('resources/assets/images', 'public/images')
    .extract([
        'highlight.js',
        'lodash',
        'popper.js',
        'jquery',
        'bootstrap',
        'axios',
        'vue'
    ])
    .sourceMaps()
    .version();

Я не хочу использовать TypeScript.


person pirmax    schedule 06.04.2019    source источник
comment
Разве вы не можете просто включить jQuery в свой макет? <script src="https://code.jquery.com/jquery-3.3.1.js"></script>.   -  person Jack Bashford    schedule 06.04.2019
comment
Возможный дубликат stackoverflow .com/questions/43783307/   -  person mbojko    schedule 06.04.2019
comment
Возможный дубликат как добавить jquery в проект laravel   -  person Jack Bashford    schedule 06.04.2019
comment
Это не проблема дублирования. Я не хочу использовать ни CDN, ни TypeScript.   -  person pirmax    schedule 06.04.2019
comment
Да, но вы хотите использовать импорт ES6. Вы пытались заменить import $ from 'jquery' на import * as $ from jquery?   -  person mbojko    schedule 06.04.2019
comment
@mbojko Да, та же проблема. То же самое с require('jquery');   -  person pirmax    schedule 06.04.2019
comment
Пожалуйста, не могли бы вы показать и свой webpack.mix.js?   -  person Rwd    schedule 06.04.2019
comment
@RossWilson Да, конечно: pastebin.com/raw/0FKyetmD   -  person pirmax    schedule 06.04.2019
comment
@RossWilson Я обновил свою проблему, если вы хотите посмотреть webpack.mix.js   -  person pirmax    schedule 06.04.2019