How to resolve vue-loader error 'vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.'

Preconditions

dependencies for npm

  "dependencies": {
    "@webpack-cli/init": "^0.1.2",
    "vue": "^2.5.17",
    "webpack": "^4.20.2"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.0",
    "style-loader": "^0.23.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  },

about webpack config

When I make the Vue.js web app with using webpack, I wanted to compile Vue's SFC(simple file component) file,
I used vue-loader V15. I made webpack.config.js file for setting it as below.

const path = require('path');
module.exports = {
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
    }
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public')
  }
}

In this case, if the file suffix name is ".vue", 'vue-loader' is going to be used.

After setting it, I run the web app by using webpack-dev-server. At that time, it occured an error same as below.

ERROR in ./src/components/app.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
 @ ./src/index.js 2:0-35 6:9-12
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js

ERROR in ./src/index.js
Module not found: Error: Can't resolve 'vue' in '/Users/test/Documents/code/webpack-test/src'
 @ ./src/index.js 1:0-22 3:4-7
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js

ERROR in ./src/components/app.vue
Module not found: Error: Can't resolve 'vue' in '/Users/test/Documents/code/webpack-test/src/components'
 @ ./src/components/app.vue 21:14-28
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js

In this case, to use vue-loader v15, we should set webpack plugin called "VueLoaderPlugin"

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

In my webpack.config.js file, the plugin was not set. So I added plugins param in this file

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
    }
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public')
  },
  plugins: [
     new VueLoaderPlugin()
  ]
}

After setting it, I resolved the error.

VueLoaderPlugin()

From vue-loader V15, there were so many changes in this plugin. The VueLoaderPlugin plugin is required from V15. If wanted to know the details, see below. It's the official document for migration from v14 Migrating from v14 | Vue Loader

References

github.com

top-men.hatenablog.com