Uncaught TypeError: Невозможно прочитать вызов свойства undefined при импорте из node_modules
Когда я импортирую в
page.js
из
node_modules
нравиться
import 'lightgallery/dist/js/lightgallery-all.min';
Webpack бросает меня
Uncaught TypeError: Cannot read property 'call' of undefined
. Импорт из локальных модулей работает нормально. Вот так это выглядит: https://prnt.sc/vfn4nc
Когда я делаю то же самое в library.js, все работает нормально!
Я использую самосборный пакет gulp, и в этом пакете я использую две задачи для своих js.
Первый для js-библиотек (js: библиотеки), а следующий для js-кода страниц (js:pages).
Оба используют webpackStream, и иногда терминал сообщает мне, что "Два экземпляра webpack запущены".
Полная задача сборки:
gulp.task(
'assets',
gulp.parallel(
'vendors-fonts',
gulp.series('scss:libraries', 'scss:pages'),
gulp.series('js:libraries', 'js:pages'),
'svg-sprite',
'images',
'webp',
'icons',
'favicon'
)
);
js-libraries.js Конфигурация webpackStream задачи:
const webpackStream = require('webpack-stream');const webpack = webpackStream.webpack;
webpackStream(
{
mode: λ.isDevelopment ? 'development' : 'production',
output: {
pathinfo: false,
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
optimization: {
splitChunks: {
cacheGroups: {
default: false,
vendors: false,
vendor: {
chunks: 'all',
test: /node_modules/,
},
},
},
},
},
webpack
)
js-pages.js Конфигурация webpackStream задачи:
const webpackStream = require('webpack-stream');
const webpack = webpackStream.webpack;
webpackStream(
{
mode: λ.isDevelopment ? 'development' : 'production',
output: {
pathinfo: false,
},
plugins: [],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
optimization: {
namedModules: true,
namedChunks: true,
splitChunks: {
cacheGroups: {
default: false,
vendors: false,
vendor: {
chunks: 'all',
test: /node_modules/,
},
},
},
},
},
webpack
)
page.js
import 'lightgallery/dist/js/lightgallery-all.min';
export default (() => {
if ($('#product-gallery').length > 0) {
$('#product-gallery').lightGallery({
thumbnail: true,
loop: false,
hideBarsDelay: 0,
slideEndAnimatoin: false,
hideControlOnEnd: true,
closable: false,
});
}
})();
библиотеки.js
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import 'magnific-popup/dist/jquery.magnific-popup.min';
import 'slick-carousel/slick/slick.min';
import 'lazysizes/lazysizes.min';