Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I'm working on a project using Vue 3. I tried to add
bootstrap-material-datetimepicker
into my project. This is how I import it on my Vue component file.
<template>
<!-- -->
</template>
<script>
// ..
import 'bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js'
import 'bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css'
// ..
</script>
I get an error when trying to run that. From the error, I can tell that somehow jquery is not detected on my app. It's weird since I believe I've added the jquery plugin definition into vue.config.js
file.
const webpack = require('webpack')
module.exports = {
baseUrl: '/public/',
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
On the browser console below is the error that I get:
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)
What should I do to resolve this issue?
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'
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.