Я получаю следующую ошибку в Chrome при запуске webpack-dev-server
для веб-сайта, который я создаю:
Uncaught ReferenceError: $ is not defined
Эта ошибка генерируется из следующего кода в нижней части HTML-страницы:
<!-- SCRIPTS -->
<script type='text/javascript'>
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
</script>
Я полагаю, что это вызвано тем, что jQuery не импортируется и не инициализируется должным образом, но, похоже, все настроено правильно. Я использую MDBootStrap и следовал инструкциям по настройке WebPack.
Мой webpack.config.js
файл имеет следующие конфигурации, начиная с записи:
entry: [
'babel-polyfill',
'./src/js/app.js',
'./src/scss/main.scss',
'./src/vendors/mdb/scss/mdb.scss',
],
Вот часть, которая настраивает плагины:
plugins: [
extractPlugin,
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery',
Waves: 'node-waves',
}),
app.js
, который является первой записью после babel-polyfill
и настроен, как указано ниже:
// jQuery
import 'jquery';
// PopperJS
import 'popper.js';
// Bootstrap 4
import 'bootstrap';
// Material Design Bootstrap
import '../vendors/mdb/js/mdb';
// Fontawesome 5
import './fa5';
// Example
import './example';
$
должно быть определено, но по какой-то причине я не могу понять, почему это не работает.