Vue loader unmet dependancy installed but still erroring

Question

I'm using using Vue with single file components and Webpack to compile everything. I'be installed vue, vue-loader and vue-template-compiler (both as a dev dependancy and a peer dependancy), but vue-loader returns the following error.

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.

I've also ensured that the version of vue and vue-template-compiler align as mentioned on another post about a different issue. I'm unsure where i'm going wrong here.

Here's my webpack config:

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(),
  );
}

And my package.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

That error often happens when the installed versions of vue and vue-template-compiler don't match. You can check the installed versions using this command:

npm ls --depth 0

You can also try updating those packages to see if you can get the installed versions to match:

npm update vue vue-template-compiler