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';

0 ответов

Другие вопросы по тегам