I have an ASP.NET MVC app. In this this app, I'm building a SPA with Vue and webpack. At this time, I'm trying to import this datepicker control.
Unfortunately, webpack seems to be causing issues. The main dependency, jQuery, won't seem to load and I don't understand why.
I have the following:
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
<script src="~/js/shared.bundle.js" asp-append-version="true"></script>
</head>
<body>
<h1>Hello</h1>
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
});
</script>
</body>
</html>
webpack.config.js
"use strict";
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
shared: './src/js/shared.js',
page: './src/js/page.js'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
moment: 'moment',
}),
new webpack.optimize.CommonsChunkPlugin({ name: 'shared' })
],
output: {
publicPath: "/js/",
path: path.join(__dirname, '/dist/'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
query: {
presets: ['es2015']
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
}
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
extensions: ['.js', '.vue']
}
};
Index.cshtml
<h2>Welcome</h2>
<hr />
<div id="view" v-cloak>
<div class="card">
<div class="card-header"><h5>Selection Details</h5></div>
<div class="card-body">
<div class="form-row">
<div class="form-group col-8">
<label for="birthdate">Birthdate</label>
<date-picker v-model="birthDate"></date-picker>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="~/js/page.js" asp-append-version="true"></script>
page.js
import Vue from 'vue';
import datePicker from 'vue-bootstrap-datetimepicker';
$(document).ready(function () {
var v = new Vue({
el: document.getElementById('view'),
components: {
"datePicker": datePicker
},
data: {
birthDate: null
}
}
});
When this page loads in the browser, I see the following error in the console window:
Uncaught ReferenceError: $ is not defined
I suspect that this is the reason the datepicker isn't working in my page properly. I don't understand this error. From my understanding, the line new webpack.ProvidePlugin({ ... should've handle this issue. When I look at the "shared.bundle.js" file that gets generated, I can see the jQuery content at the top. This confuses me even more. I don't understand why I'm getting this error. Any help is appreciated!
