Как подружить плагин jquery.matchHeight с Webpack?

117
27 октября 2021, 17:50

добавил плагин jquery.matchHeight в проект. Во время сборки проекта вылазит ошибка "TypeError: Cannot set property 'matchHeight' of undefined"

D:\GitHub\HTML-coding\Mint\node_modules\webpack-cli\bin\cli.js:93
                                throw err;
                                ^
TypeError: Cannot set property 'matchHeight' of undefined
    at D:\GitHub\HTML-coding\Mint\node_modules\jquery-match-height\dist\jquery.matchHeight-min.js:7:171

Сам код плагина

import 'babel-polyfill';
import "../styles/sass/main.scss";
import $ from 'jquery';
import 'jquery-match-height';
$(document).ready(function() {
    /* MatchHeight function */
    $(function() {
        $('.news__content.item').matchHeight({
            byRow: true,
            property: 'min-height',
            target: null,
            remove: false
        });
    });
});

package.json

{
  "name": "mint",
  "version": "4.17.2",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prebuild": "rimraf public && npm install",
    "build": "webpack --mode production --colors --progress",
    "prestart": "rimraf public && npm install",
    "start": "webpack-dev-server --mode development --hot --colors --progress"
  },
  "browserslist": [
    "last 2 version",
    "> 2%",
    "maintained node versions",
    "not dead"
  ],
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "@babel/preset-env": "^7.4.4",
    "autoprefixer": "^9.5.1",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "cssnano": "^4.1.10",
    "file-loader": "^3.0.1",
    "glob": "^7.1.4",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.0.6",
    "image-webpack-loader": "^4.6.0",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "rimraf": "^2.6.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1",
    "yargs": "^13.2.2"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "jquery": "^3.4.1",
    "jquery-match-height": "^0.7.2",
    "lodash": "^4.17.11"
  }
}

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const argv = require('yargs').argv;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isDevelopment = argv.mode === 'development';
const isProduction = !isDevelopment;
const distPath = path.join(__dirname, '/public');
const config = {
  entry: {
    main: './src/js/index.js'
  },
  output: {
    filename: 'main.js',
    path: distPath
  },
  module: {
    rules: [{
      test: /\.html$/,
      use: 'html-loader'
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader'
      }]
    }, {
      test: /\.scss$/,
      exclude: /node_modules/,
      use: [
        isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: [
              isProduction ? require('cssnano') : () => {},
              require('autoprefixer')({
                browsers: ['last 2 versions']
              })
            ]
          }
        },
        'sass-loader'
      ]
    }, {
      test: /images[\\\/].+\.(gif|png|jpe?g|svg)$/i,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name][hash].[ext]'
        }
      }, {
        loader: 'image-webpack-loader',
        options: {
          mozjpeg: {
            progressive: true,
            quality: 70
          }
        }
      },
      ],
    }, {
      test: /fonts[\\\/].+\.(otf|eot|svg|ttf|woff|woff2)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: 'fonts/[name][hash].[ext]'
        }
      },
    }]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    ...glob.sync('./src/*.html')
      .map(htmlFile => {
        return new HtmlWebpackPlugin({
          filename: path.basename(htmlFile),
          template: htmlFile
        });
      })
  ],
  optimization: isProduction ? {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        uglifyOptions: {
          compress: {
            inline: false,
            drop_console: true
          },
        },
      }),
    ],
  } : {},
  devServer: {
    contentBase: distPath,
    port: 9000,
    compress: true,
    open: true
  }
};
module.exports = config;
READ ALSO
Поворот объекта в Unity

Поворот объекта в Unity

Необходимо повернуть объект в юнитиВ Inspector видно, что он повёрнут, но в показе камеры это не заметно, т

126
Update и открытые методы

Update и открытые методы

Может кто-то объяснить, можно ли делать так:

90
Вывод данных из БД в DataGridView

Вывод данных из БД в DataGridView

не смог найти тему с ответом на мой вопросЕсть база данных на локальном сервере MySql

131