plugins on vue.config.js is not detected

Question

I'm working on a project using Vue 3. In some case, I needed the
bootstrap-material-datetimepicker, so I imported it on my vue component file.

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

<script>
// ..

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

// ..
</script>

This 3rd party library requires jQuery. I add it inside vue.config.js as plugin.

const webpack = require('webpack')

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

I get no error on the command line prompt. But I do get some errors on the browser console.

vue-router.esm.js?8c4f:1905 ReferenceError: jQuery is not defined at eval (bootstrap-material-datetimepicker.js?5260:1295) at Object../node_modules/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js (vendors~PublicSignUp.js:76) at webpack_require (app.js:768) at fn (app.js:131) at 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/pages/public/SignUp.vue?vue&type=script&lang=js&:6) at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/pages/public/SignUp.vue?vue&type=script&lang=js& (PublicSignUp.js:11) at webpack_require (app.js:768) at fn (app.js:131) at eval (SignUp.vue?8585:1) at Module../src/pages/public/SignUp.vue?vue&type=script&lang=js& (PublicSignUp.js:80)

Can somebody help me please?

novalagung novalagung · Accepted Answer · 2018-11-07T16:00:55

Just saw similar issue on github, turns out I just need to wrap the plugins inside configureWebpack.

const webpack = require('webpack');

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

plugins on vue.config.js is not detected

1 Answers