Я установил magnificPopup с помощью команды «npm i magnific-popup», после чего импортировал его в файл app.js. Но в консоли браузера он показывает (magnificPopup не является функцией)
app.js
import $ from "jQuery";
window.$ = window.jQuery = $;
import "magnific-popup";
$(document).ready(function() {
$('.play-btn').magnificPopup({ type: 'video' });
});
webpack.config.js
var path = require("path");
var webpack = require('webpack');
module.exports = {
entry: {
app: "./app/assets/scripts/app.js",
vendor: "./app/assets/scripts/vendor.js"
},
output: {
path: path.resolve(__dirname, "./app/temp/scripts"),
filename: "[name].js"
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["es2015"]
}
}
}
]
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery'
}),
]
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Это просто, ваши файлы не находятся в месте импорта. Пожалуйста, проверьте свой путь или расположение / положение файла один раз. Кроме того, проверьте свою библиотеку JQuery, если она включена, тогда она должна быть выше файлов / кода этой библиотеки.
Я исправил проблему
jQuery не нужно импортировать в app.js
После исправления файл app.js выглядит так
import "magnific-popup";
$(document).ready(function() {
$('.play-btn').magnificPopup({ type: 'video' });
});
Файлы Jquery и magnific Popup находятся в месте импорта (node_modules). Также библиотека JQuery была включена над великолепным плагином Popup.