7

I use the latest versions of vue-cli3 webpack4 and vue-loader v15.

I want to configure vue-loader, but there is an error:

Error: [VueLoaderPlugin Error] No matching use for vue-loader is found. Make sure the rule matching .vue files include vue-loader in its use.

vue.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
    productionSourceMap: false,
    baseUrl: "./",
    configureWebpack: {
        module: {
            rules: [{
                test: /\.vue$/,
                loader: "vue-loader"
            }]
        },
        plugins: [
            new VueLoaderPlugin()
        ]
    }
}

package.js


     "dependencies": {
        "awe-dnd": "^0.3.1",
        "axios": "^0.18.0",
        "iview": "^3.1.5",
        "lodash": "^4.17.11",
        "vue": "^2.5.17",
        "vue-router": "^3.0.2"
      },
      "devDependencies": {
        "@babel/cli": "^7.1.5",
        "@babel/core": "^7.1.6",
        "@babel/polyfill": "^7.0.0",
        "@babel/preset-env": "^7.1.6",
        "@vue/cli-plugin-babel": "^3.2.0",
        "@vue/cli-plugin-eslint": "^3.2.1",
        "@vue/cli-service": "^3.2.0",
        "css-loader": "^1.0.1",
        "eslint": "^5.9.0",
        "eslint-plugin-vue": "^4.7.1",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^2.0.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "iview-loader": "^1.2.2",
        "less": "^3.9.0",
        "less-loader": "^4.1.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "vue-cli-plugin-iview": "^1.0.6",
        "vue-hot-reload-api": "^2.3.1",
        "vue-html-loader": "^1.2.4",
        "vue-loader": "^15.4.2",
        "vue-style-loader": "^4.1.2",
        "vue-template-compiler": "^2.5.17",
        "webpack": "^4.26.1",
        "webpack-chain": "^5.0.1",
        "webpack-dev-server": "^3.1.10",
        "webpack-merge": "^4.1.4"
      },

I called console.log on vue-loader/plugin.js.

rawRules (line-number 27)

There are 20+ rules. /\.vue$/ matched the second rule.

But the second rule is url-loader?

What do I do?

1
  • I have the same error. Did you found a solution? Dec 30, 2018 at 12:56

2 Answers 2

4

I think you should put vue-loader on dependencies. Recently i updated my project: vue, vue-loader, webpack... this is my package.json

{
  "name": "pack",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "build": "webpack --env.prod --config webpack.config.js"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.0.0-rc.2",
    "@types/webpack-env": "^1.13.5",
    "aspnet-webpack": "^2.0.3",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^2.0.0",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.3.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^4.23.1",
    "webpack-hot-middleware": "^2.24.3"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "chart.js": "^2.7.3",
    "downloadjs": "^1.4.7",
    "idle-vue": "^2.0.5",
    "jwt-decode": "^2.2.0",
    "material-design-icons-iconfont": "^3.0.3",
    "v-offline": "^1.0.10",
    "vue": "^2.5.21",
    "vue-analytics": "^5.12.2",
    "vue-chartjs": "^3.4.0",
    "vue-chartkick": "^0.5.0",
    "vue-config": "^1.0.0",
    "vue-embed": "^1.0.0",
    "vue-google-charts": "^0.3.2",
    "vue-json-excel": "^0.2.5",
    "vue-loader": "^15.4.2",
    "vue-moment": "^4.0.0",
    "vue-popperjs": "^1.6.1",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.21",
    "vuetify": "^1.3.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Your webpack.config it seems fine... but just in case, this is my code:

var path = require('path')
var webpack = require('webpack')
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  context: __dirname,
  entry: {
    main: ['babel-polyfill', './App/index.js']
  },
  plugins:[
    new VueLoaderPlugin()
  ],
  module: {
    rules: [{
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
        }
      },

...
3
  • maybe you are right,but your webpack seems in other file? Use vue-cli ,how to use webpack like this?
    – sdwdjzhy
    Feb 15, 2019 at 13:26
  • @sdwdjzhy my webpack file is on the root folder Feb 15, 2019 at 16:59
  • maybe i need to search the webpack doc .Thank you very much !
    – sdwdjzhy
    Feb 18, 2019 at 1:39
3

I was having this same problem and found this thread solved my problem.

Essentially, you do not need to specify the module rules or the loader for vue-loader when using vue-cli to build your app because vue-cli provides vue-loader out of the box.

I do not know why we get the error when we try to specify the module rules, and it is unfortunate that it gives this unhelpful error, but regardless, I hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.