Error: [VuetifyLoaderPlugin Error] No matching rule for vue-loader found.

[tarkhil]

I'm running

`Environment Info:

System:
OS: freebsd
CPU: (4) x64 Intel(R) Xeon(R) CPU E3-1220 v3 @ 3.10GHz
Binaries:
Node: 15.2.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.8 - /usr/local/bin/npm
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.0-rc.2
@vue/babel-plugin-jsx: 1.0.0-rc.3
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 4.5.8
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 4.5.8
@vue/cli-plugin-babel: ~4.5.0 => 4.5.8
@vue/cli-plugin-eslint: ~4.5.0 => 4.5.8
@vue/cli-plugin-router: ~4.5.0 => 4.5.8
@vue/cli-plugin-typescript: ~4.5.0 => 4.5.8
@vue/cli-plugin-vuex: ~4.5.0 => 4.5.8
@vue/cli-service: ~4.5.0 => 4.5.8
@vue/cli-shared-utils: 4.5.8
@vue/component-compiler-utils: 3.2.0
@vue/eslint-config-typescript: ^5.0.2 => 5.1.0
@vue/preload-webpack-plugin: 1.1.2
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: ^6.2.2 => 6.2.2
typescript: ~3.9.3 => 3.9.7
vue: ^2.6.11 => 2.6.12
vue-class-component: ^7.2.3 => 7.2.6
vue-cli-plugin-vuetify: ~2.0.7 => 2.0.7
vue-eslint-parser: 7.1.1
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.5 (16.0.0-rc.1)
vue-property-decorator: ^8.4.2 => 8.5.1
vue-router: ^3.2.0 => 3.4.9
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.11 => 2.6.12
vue-template-es2015-compiler: 1.9.1
vuetify: ^2.2.11 => 2.3.17
vuetify-loader: ^1.3.0 => 1.6.0
vuex: ^3.4.0 => 3.5.1
npmGlobalPackages:
@vue/cli: 4.5.8
`

Just
vue create vuetify vue add vuetify npm run build
yields
`
ERROR Failed to compile with 2 errors 2:01:50 AM

error in /usr/home/tarkhil/work/vuetify/src/main.ts

ERROR in /usr/home/tarkhil/work/vuetify/src/main.ts(12,3):
12:3 No overload matches this call.
Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): CombinedVueInstance<Vue, object, object, object, Record<...>>', gave the following error.
Argument of type '{ router: VueRouter; store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, object, object, object, Record<...>>', gave the following error.
Argument of type '{ router: VueRouter; store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> | undefined): CombinedVueInstance<...>', gave the following error.
Argument of type '{ router: VueRouter; store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
10 | router,
11 | store,

12 | vuetify,
| ^
13 | render: h => h(App)
14 | }).$mount('#app')
15 |

error in /usr/home/tarkhil/work/vuetify/src/plugins/vuetify.ts

ERROR in /usr/home/tarkhil/work/vuetify/src/plugins/vuetify.ts(2,21):
2:21 Could not find a declaration file for module 'vuetify/lib'. '/usr/home/tarkhil/work/vuetify/node_modules/vuetify/lib/index.js' implicitly has an 'any' type.
Try npm install @types/vuetify if it exists or add a new declaration (.d.ts) file containing declare module 'vuetify/lib';
1 | import Vue from 'vue';

2 | import Vuetify from 'vuetify/lib';
| ^
3 |
4 | Vue.use(Vuetify);
5 |

ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: vue-cli-service build
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.
I've changed vue.config.js to
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
configureWebpack: {
plugins: [
new VuetifyLoaderPlugin()
],
},
"transpileDependencies": [
"vuetify"
]
}
and got
ERROR Error: [VuetifyLoaderPlugin Error] No matching rule for vue-loader found.
Make sure there is at least one root-level rule that uses vue-loader.
Error: [VuetifyLoaderPlugin Error] No matching rule for vue-loader found.
Make sure there is at least one root-level rule that uses vue-loader.
at VuetifyLoaderPlugin.apply (/usr/home/tarkhil/work/vuetify/node_modules/vuetify-loader/lib/plugin.js:29:13)
at webpack (/usr/home/tarkhil/work/vuetify/node_modules/webpack/lib/webpack.js:51:13)
at /usr/home/tarkhil/work/vuetify/node_modules/@vue/cli-service/lib/commands/build/index.js:200:5
at new Promise ()
at build (/usr/home/tarkhil/work/vuetify/node_modules/@vue/cli-service/lib/commands/build/index.js:199:10)
at async /usr/home/tarkhil/work/vuetify/node_modules/@vue/cli-service/lib/commands/build/index.js:89:7
`

What should I do next?

[tarkhil]

It's typescript-related; project without typescript support does not yield that error

[KaelWD]

This is not a useful bug report. I created a new project with the following options and the only error on building is vuetifyjs/vue-cli-plugins#43:

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: 
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

📦  Installing vue-cli-plugin-vuetify...
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? Yes
? Select locale English

[EternalShallow]

nuxt.config.js

import colors from 'vuetify/es5/util/colors'
import VuetifyLoaderPlugin from 'vuetify-loader/lib/plugin'
const GitRevisionPlugin = require('git-revision-webpack-plugin')
const git_revision_plugin = new GitRevisionPlugin()
const webpack = require('webpack')
const env = require('dotenv').config({ path: '.env.' + process.env.BASE })
const base = process.env.BASE === 'prod' ? '/yswap/' : '/dapp/yswap/'
export default {
  // Target (https://go.nuxtjs.dev/config-target)
  server: {
    host: '0.0.0.0',
    port: 39000 // default: 3000
  },
  target: 'server',
  env: env.parsed,
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    // titleTemplate: '%s - Yswap',
    titleTemplate: '%s',
    title: 'Yswap',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: base + 'favicon.ico' }
    ],
    script: [
      { src: base + 'rem/flexible.js', type: 'text/javascript', charset: 'utf-8' }
    ]
  },
  router: {
    middleware: ['route'],
    base: base
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
  ],

  styleResources: {
    less: [
      './assets/css/fun.scss',
      './assets/css/resetVuetify.scss',
      './assets/css/color.scss',
      './assets/css/font.scss',
      './assets/css/space.scss',
      './assets/css/common.scss',
      './assets/css/main.scss'
    ]
  },
  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '~/plugins/index.js',
    // 解决引入插件插件配置挂载在windows
    { src: '~/node_modules/vue-clipboard2', ssr: false },
    {
      src: '~/plugins/vuetify.js',
      ssr: true // 关闭ssr
    }
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify'
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/dotenv',
    '@nuxtjs/style-resources'
  ],

  axios: {
    // proxy:true  //  代理
  },
  proxy: {
    // "/api/":"http://localhost:3001/"    //  key(路由前缀)：value(代理地址)
  },

  // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      light: true,
      themes: {
        light: {
          primary: '#01598d',
          secondary: colors.grey.darken1,
          accent: colors.shades.black,
          error: colors.red.accent3
        }
      }
    }
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    transpile: ['vuetify/lib'],
    plugins: [
      new webpack.DefinePlugin({
        'process.COMMITHASH': JSON.stringify(git_revision_plugin.commithash())
      }),
      new VuetifyLoaderPlugin({
        /**
         * This function will be called for every tag used in each vue component
         * It should return an array, the first element will be inserted into the
         * components array, the second should be a corresponding import
         *
         * originalTag - the tag as it was originally used in the template
         * kebabTag    - the tag normalized to kebab-case
         * camelTag    - the tag normalized to PascalCase
         * path        - a relative path to the current .vue file
         * component   - a parsed representation of the current component
         */
        match (originalTag, { kebabTag, camelTag, path, component }) {
          if (kebabTag.startsWith('core-')) {
            return [
              camelTag,
              `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`
            ]
          }
        }
      })
    ],
    /**
     * todo: nuxt 升级到3.0版本以上的时候需要改为对象的形式展示，目前用的是nuxt2.14.6暂时用数组，构建的时候会有警告
     * 2.0版本切换object rem 不生效
     * Using an Array as build.postcss will be deprecated in Nuxt 3. Please switch to the object declaration
     */
    postcss: [
      require('postcss-px2rem')({
        remUnit: 75
      })
    ],
    /*
    ** You can extend webpack config here
    */
    extend (config, { isDev, isClient }) {
      if (isClient && !isDev) {
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      }
    }
  }
}

npm

"nuxt": "^2.14.6",
"vue": "^2.6.12",
"vue-loader": "^15.9.5",
"vuetify": "^2.3.21",
"vuetify-loader": "^1.6.0",
"@nuxtjs/axios": "^5.12.2",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/eslint-config": "^3.1.0",
"@nuxtjs/eslint-module": "^2.0.0",
"@nuxtjs/style-resources": "^1.0.0",
"@nuxtjs/vuetify": "^1.11.2",

[KaelWD]

This issue is being closed due to inactivity.

If you have any additional questions, please reach out to us in our Discord community.

[sundowndev]

Updating to the latest version fixed the issue on my end.

[oti]

I'm using vuetify v1.5.5 and got the same error.

Updating vuetify-loader, fixed the issue.

Version when the error occurred ↓

• vuetify-loader: ^ 1.2.1.

The version with the error resolved ↓

• vuetify-loader: ^ 1.2.2

I hope it helps people who visit here.

[Shavindra]

Using 1.6 gives me same error too

[isaqib23]

Hi I'm using VUE, VUETIFY with Laravel 8 & resolved this.

// pakage.json

"devDependencies": {
        "@babel/preset-env": "^7.11.0",
        "@mdi/font": "^5.9.55",
        "axios": "^0.21",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-polyfill": "^6.26",
        "browser-sync": "^2.26.12",
        "browser-sync-webpack-plugin": "2.0.1",
        "cross-env": "^7.0.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^11.0.1",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.5",
        "vue-router": "^3.5.1",
        "vue-template-compiler": "^2.6.12",
        "vuetify-loader": "^1.7.2",
        "vuex": "^3.6.2",
        "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "vuetify": "^2.4.5"
    }

// webpack.mix.js

const mix = require('laravel-mix');
const webpack = require('./webpack.config');
const path = require('path');
mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/styles/app.sass', 'public/css')
    .webpackConfig(Object.assign(webpack));

and

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};

[qxygene]

any fix for this?

[mahammad-sixberries]

face same issue.

Can you please tell me what cause this error? How can I add matching rule for vue-loader?

[gcruzrios]

Vuetify 2.x will not work with Vue 3 due to internal changes with Vue 3. You will need to wait for Vuetify 3.x to be able to use Vuetify w/ Vue 3.

You can follow v3 development on our Notion Board

[phcco]

Solved my issue by simply reordering the plugin list to make sure vue-loader runs before vuetify-loader (^1.7.0):

/* ... */
plugins: [
    new VueLoaderPlugin(), // Before 
    new VuetifyLoaderPlugin({
        /* ... */
    }),
],

[ohadch]

If this is still relevant for anyone, I encountered this problem while migrating my app from Vue 2 to Vue 3. I solved it by removing vue-loader from devDependencies.

[KaelWD]

vuetify-loader does not support Vue 3 yet.