Включает загрузчик материала-даты-времени в проекте Vue 3

Question

Я работаю над проектом с использованием Vue 3. В некоторых случаях мне нужно было
bootstrap-material-datetimepicker , поэтому я импортировал его в свой файл компонента vue.

<template>
    <div>
        <!-- -->
    </div>
</template>

<script>
// ..

import 'bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js'
import 'bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css'

// ..
</script>

Эта сторонняя библиотека требует jQuery. Я добавляю его внутрь vue.config.js как плагин.

const webpack = require('webpack')

module.exports = {
    baseUrl: '/public/',
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jquery: 'jquery',
            'window.jQuery': 'jquery',
            jQuery: 'jquery'
        })
    ]
}

Я не получаю сообщение об ошибке в командной строке. Но я получаю некоторые ошибки в консоли браузера.

vue-router.esm.js? 8c4f: 1905 ReferenceError: jQuery не определен в eval (bootstrap-material-datetimepicker.js? 5260: 1295) в Object ../ node_modules / bootstrap-material-datetimepicker / js / bootstrap-material-datetimepicker.js (vendors ~ PublicSignUp.js: 76) в webpack_require (app.js: 768) в фн (app.js: 131) в eval (cjs.js?! ./ node_modules / babel-loader / lib / index.js! ./ node_modules / cache-loader / dist / cjs.js?! ./ node_modules / vue-loader / lib / index.js ?!? ./ SRC / страницы / государственные / SignUp.vue Vue и тип = сценарий & LANG = JS &: 6) в Модуле /vue-loader/lib/index.js?!./src/pages/public/SignUp.vue?vue&type=script&lang=js& (PublicSignUp.js: 11) в webpack_require (app.js: 768) в фн (app.js: 131) на eval (SignUp.vue? 8585: 1) в модуле ../ src / pages / public / SignUp.vue? vue & type = script & lang = js & (PublicSignUp.js: 80)

Может кто-нибудь помочь мне, пожалуйста?

Answer 1

Только что увидел похожую проблему на github , оказывается, мне нужно обернуть plugin внутрь configureWebpack.

const webpack = require('webpack');

module.exports = {
    baseUrl: '/public/',
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                '$': 'jquery',
                'jquery': 'jquery',
                'jQuery': 'jquery',
                'window.jQuery': 'jquery',
                'moment': 'moment'
            })
        ]
    }
}