Не компилируется build webpack

95
06 февраля 2022, 08:10

Проблема вот в чем, сделал проект пытаюсь его скомпилировать а он не компилируется, подскажите пожалуйста как это поправить я совсем слабый и только познакомился с webpack.

вот такая ошибка

TypeError: Cannot read property 'compilation' of undefined
    at OptimizeCssAssetsWebpackPlugin.apply (C:\Users\Pavel\Documents\GitHub\site\node_modules\last-call-webpack-plugin\src\index.js:170:20)
    at Compiler.apply (C:\Users\Pavel\Documents\GitHub\site\node_modules\webpack\node_modules\tapable\lib\Tapable.js:375:16)
    at webpack (C:\Users\Pavel\Documents\GitHub\site\node_modules\webpack\lib\webpack.js:32:19)
    at err (C:\Users\Pavel\Documents\GitHub\site\build\build.js:18:3)
    at next (C:\Users\Pavel\Documents\GitHub\site\node_modules\rimraf\rimraf.js:75:7)
    at CB (C:\Users\Pavel\Documents\GitHub\site\node_modules\rimraf\rimraf.js:111:9)
    at C:\Users\Pavel\Documents\GitHub\site\node_modules\rimraf\rimraf.js:137:14
    at FSReqWrap.oncomplete (fs.js:153:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Havemotion@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Havemotion@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

и вот такой фаил билда

require('./check-versions')()
process.env.NODE_ENV = 'production'
var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')
    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

Вот webpack

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})
if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}
if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

вот package.json

{
  "name": "Havemotion",
  "version": "1.0.0",
  "description": "Havemotion",
  "author": "iVanSh <mail@ivansh.ru>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "test": "jest"
  },
  "dependencies": {
    "axios": "^0.18.1",
    "babel-polyfill": "^6.23.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "detect-browser": "^2.0.0",
    "es6-promise": "^4.2.4",
    "lodash": "^4.17.15",
    "moment": "^2.22.2",
    "qs": "^6.8.0",
    "vue": "^2.2.2",
    "vue-progressbar": "^0.7.1",
    "vue-router": "^2.2.0",
    "vuex": "^2.2.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.2.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.1",
    "eslint": "^3.14.1",
    "eslint-config-airbnb-base": "^11.0.1",
    "eslint-friendly-formatter": "^2.0.7",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jest": "^19.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.20.0",
    "jest": "^25.0.0",
    "node-sass": "^4.5.1",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "ora": "^1.1.0",
    "pug": "^2.0.0-beta11",
    "pug-loader": "^2.3.0",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.3",
    "semver": "^5.3.0",
    "style-loader": "^0.21.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^3.0.0",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.5",
    "vue-template-compiler": "^2.2.4",
    "webpack": "^2.2.1",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^4.0.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Помогите пожалуйста, заранее спасибо.

Answer 1

На данный момент, судя по package.json установлен webpack2, в то время как плагин, на котором падает сборка, установлен для четвертой версии вебпака. Соответственно, либо даунгрейдить плагины (все, под вторую версию), либо апгрейдить вебпак до 4, и, соответственно, плагины для четвертой. С апгрейдом проще, потому как просто обновлять плагины до последней версии проще, чем вылавливать, какая там версия сделана под второй вебпак.

UPD. Вообще судя по пакетам, создаётся впечатление, что проект достался в наследство от древних греков, поэтому тут есть нюанс. Если тот плагин, на котором валится сборка был добавлен Вами, и это единственный плагин, который вы добавляли ( и поэтому он естественно заехал последней версии) то проще и быстрее будет как раз таки откатить его версию на совместимость с вебпак2. Как говорится, дешего и сердито.

READ ALSO
Вместо маркера загружается второе окно ,,найти,,

Вместо маркера загружается второе окно ,,найти,,

Подскажите где ошибка в коде - строкаvar SearchControl = new ymapscontrol

73
Как добавить объект в массив объектов в react?

Как добавить объект в массив объектов в react?

Как добавить объект в массив объектов в react?

71
Задачник и решебник по темам JavaScript

Задачник и решебник по темам JavaScript

Не подскажите ресурс/книгу, где было бы много задач (с ответами) по чистому JS ?

64
Как перевести .gif в массив .png в javascript?

Как перевести .gif в массив .png в javascript?

мне нужно простое решение, одной функцией или небольшой однофайловой библиотекой загружаемой в html файле

115