Vue загрузчик неудовлетворена зависимость установлена, но все еще с ошибками

Question

Я использую Vue с отдельными файловыми компонентами и Webpack для компиляции всего. Я установил vue, vue-loader и vue-template-compiler (как в зависимости от dev, так и в зависимости от peer), но vue-loader возвращает следующую ошибку.

ERROR in ./resources/assets/js/components/Modal.vue Module build failed: Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

Я также позаботился о том, чтобы версии vue и vue-template-compiler совпадали, как упоминалось в другом посте о другой проблеме. Я не уверен, где я здесь не так.

Вот мой конфиг веб-пакета:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');

require('babel-polyfill');

const inProduction = (process.env.NODE_ENV === 'production');

module.exports = {
  entry: {
    vendor: [
      './index.js',
      'babel-polyfill',
    ],
    main: './resources/assets/js/main.js',
    banner: './resources/assets/js/banner.js',
    video: './resources/assets/js/video.js',
    newsSlider: './resources/assets/js/news-slider.js',
  },

  output: {
    path: path.resolve(__dirname, './public/wp-content/themes/designdough/'),
    filename: 'assets/js/[name].js',
  },

  externals: {
    jquery: 'jQuery',
  },

  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                url: false,
                minimize: false,
                sourceMap: true,
                importLoaders: 1,
              },
            },
            'postcss-loader',
            'sass-loader',
          ],
          fallback: 'style-loader',
        }),
      },

      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },

      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },

  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },

  plugins: [
    new ExtractTextPlugin('style.css'),

    new VueLoaderPlugin(),

    new webpack.LoaderOptionsPlugin({
      minimize: inProduction,
    }),

    new WebpackNotifierPlugin({
      title: 'WP Theme',
      contentImage: path.resolve('./public/favicon.ico'),
      alwaysNotify: true,
    }),
  ],
};

if (inProduction) {
  module.exports.plugins.push(
    new webpack.optimize.UglifyJsPlugin(),
  );
}

И мой пакет.json:

  "dependencies": {
    "@vimeo/player": "^2.6.3",
    "animate.css": "^3.6.1",
    "slick-carousel": "^1.8.1",
    "vue": "^2.5.17"
  },
  "peerDependencies": {
    "vue-template-compiler": "^2.5.17"
  },
  "devDependencies": {
    "autoprefixer": "^8.5.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "glob-all": "^3.1.0",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.1.4",
    "purgecss-webpack-plugin": "^0.22.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.21.0",
    "tailwind": "^2.2.0",
    "tailwindcss": "^0.5.3",
    "vue-loader": "^15.4.1",
    "webpack": "^3.10.0",
    "webpack-cli": "^2.1.3",
    "webpack-notifier": "^1.5.1"
  }

Answer 1

Эта ошибка часто возникает, когда установленные версии vue и vue-template-compiler не совпадают. Вы можете проверить установленные версии с помощью этой команды:

npm ls --depth 0

Вы также можете попробовать обновить эти пакеты, чтобы посмотреть, сможете ли вы установить установленные версии для соответствия:

npm update vue vue-template-compiler