vite, npm run build, $ is not a function

Question

vite, npm run build, $ is not a function

Рейтинг: 0Ответов: 0Опубликовано: 06.06.2023

Использую Vite в Laravel, подскажите, почему при запуске npm run dev сайт запускается без ошибок, а если запустить npm run build то выдаёт ошибку $ is not a function?

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/app-adminpanel.js',
            ],
            refresh: true,
        }),
    ],
});

layouts/app.blade.php

<head>
    <meta charset="utf-8">
    ...

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title') | {{ config('app.name') }}</title>

    @vite(['resources/css/app.css', 'resources/js/app-adminpanel.js'])

</head>

app-adminpanel.js

// import 'jquery';
import './vendor/jquery';
// import $ from './vendor/jquery';
// import jQuery from './vendor/jquery';
// import jQuery from 'jquery';
// window.jQuery = window.$ = jQuery
import './adminpanel';

'./vendor/jquery' - resources/js/vendor/jquery.js
тут если раскомментировать import 'jquery'; вместо './vendor/jquery' то выдаёт и в dev ошибку

adminpanel.js

$(document).ready(function(){
    console.log('adminpanel ready');
})

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.1.2",
        "jquery": "^3.2.1",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.21",
        "postcss": "^8.4.6",
        "sass": "^1.62.1",
        "tailwindcss": "^3.1.0",
        "vite": "^4.0.0"
    }
}

Edited

P.S.
Получилось устранить ошибку путём добавления в файл adminpanel.js содержимое из файла resources/js/vendor/jquery.js.
И получается что в результате в сжатом файле js находится две копии jquery (первый из файла app-adminpanel.js).
Можете объяснить что там произошло при сборке и почему работает только с двумя jquery?

laravel vite

Источник: Stack Overflow на русском

vite, npm run build, $ is not a function

Ответы