0

Проблема вот в чем, сделал проект пытаюсь его скомпилировать а он не компилируется, подскажите пожалуйста как это поправить я совсем слабый и только познакомился с 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! [email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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 <[email protected]>",
  "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"
  ]
}

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

3
  • Какая версия вебпака и плагинов? Как выглядит package.json?
    – bonusrk
    6 янв 2020 в 9:24
  • Добавил package.json в вопрос 6 янв 2020 в 9:46
  • Ответить то ответил, но должен предупредить, что идея глобального апгрейда зависимостей тоже может оказаться нетривиальной в исполнении, ввиду некоторого изменения синтаксиса в конфигурациях вебпака между второй и четвертой версией
    – bonusrk
    6 янв 2020 в 9:56

1 ответ 1

0

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

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

6
  • Это правда проект не мой мне нужно его поправить, и я уже все поправил но билд не запускается. И я нечего не менял я просто написал npm i и сначала не смог разобраться как запустить билд но разобрался и теперь проблема с билдом 6 янв 2020 в 10:05
  • Если вы добавили только optimizeCssPlugin то проще его откатить на версию для второго вебпака. npm install и yarn add без явного указания версии привозят последнюю релизную, а она, естественно, заточена под актуальный вебпак, который нынче четвертый. Я, кстати, навскидку вижу там ещё 4 расхождения в зависимых библиотеках. И CopyWebpackPlugin следующий кандидат на то, чтобы положить сборку.
    – bonusrk
    6 янв 2020 в 10:08
  • А как откатить можете подсказать? 6 янв 2020 в 10:09
  • Удалить текущий, установить новый, явно указав версию
    – bonusrk
    6 янв 2020 в 10:13
  • Спасибо большое, все сработало 6 янв 2020 в 10:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.