Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

vue-loader not installed correctly

See original GitHub issue

Version

3.0.0-beta.15

Reproduction link

https://github.com/YogliB/vue-cli_test

Steps to reproduce

vue create [folder-name]
cd [folder-name]
npm run serve

What is expected?

The app will be compiled/transpiled and served.

What is actually happening?

λ  npm run serve

> test@0.1.0 serve C:\Users\yogib\projects\test
> vue-cli-service serve

 INFO  Starting development server...
 94% after seal

 ERROR  Failed to compile with 8 errors                                                         12:49:06
 error  in ./src/App.vue

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

 @ ./src/main.js 2:0-27 7:17-20
 @ multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/App.vue?vue&type=script&lang=js

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

 @ ./src/App.vue?vue&type=script&lang=js 1:0-165 1:181-184 1:186-348 1:186-348
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/App.vue?vue&type=template&id=04c2046b

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

 @ ./src/App.vue?vue&type=template&id=04c2046b 1:0-417 1:0-417
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/components/HelloWorld.vue

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

 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js 9:0-52 14:4-14
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/components/HelloWorld.vue?vue&type=script&lang=js

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

 @ ./src/components/HelloWorld.vue?vue&type=script&lang=js 1:0-178 1:194-197 1:199-374 1:199-374
 @ ./src/components/HelloWorld.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/App.vue?vue&type=style&index=0&lang=css

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

 @ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css 4:14-353 14:3-18:5 14:353-18:4 15:22-361
 @ ./src/App.vue?vue&type=style&index=0&lang=css
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/components/HelloWorld.vue?vue&type=template&id=656039f0&scoped=true

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

 @ ./src/components/HelloWorld.vue?vue&type=template&id=656039f0&scoped=true 1:0-445 1:0-445
 @ ./src/components/HelloWorld.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=656039f0&scoped=true&lang=css

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

 @ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=style&index=0&id=656039f0&scoped=true&lang=css 4:14-399 14:3-18:5 14:399-18:4 15:22-407
 @ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=656039f0&scoped=true&lang=css
 @ ./src/components/HelloWorld.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Issue Analytics

State:
Created 5 years ago
Comments:18 (2 by maintainers)

Top GitHub Comments

75reactions

yyx990803commented, Jun 1, 2018

Should be fixed with vue-loader 15.2.3. Please let us know if the issue persists after updating vue-loader via npm update --depth=9999 vue-loader

21reactions

electrocniccommented, May 6, 2019

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

In my webpack.base.conf.js I added the following lines:

'use strict'
...
const { VueLoaderPlugin } = require('vue-loader')

...

module.exports = {
	context: ...,
	entry: {
		...
	},
	output: {
		...
	},
	resolve: {
		...
	},
	module: {
		rules: [
			...
		]
	},
	node: {
		...
	},
	plugins: [
                ...
		new VueLoaderPlugin(),
                ...
	]
}

(and of course, install it with npm install --save-dev vue-loader vue-template-compiler, see here)

… which resolved the first issue for me, but now I got another error saying:

Failed to compile with 4 errors

These relative modules were not found:

* ./App.vue?vue&type=style&index=0&lang=css& in ./src/App.vue
* ./Hello.vue?vue&type=style&index=0&id=361a4bd2&scoped=true&lang=css& in ./src/components/Hello.vue
* ./assets/logo.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90&
* ./assets/dj.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90&

which seems to have to do with that VueLoaderPlugin, and with the VueTemplateCompiler if I got it right?

EDIT: Figured out that I missed to install some packages which where used by my webpack config.

Copied from another thread

Spent a whole day on this. In my case, my webpack config used postcss-loader in the rules for css loading, but I did not install it via npm install --save-dev postcss-loader. The error message said nothing about “postcss-loader”, the error was simply

* ./Hello.vue?vue&type=style&index=0&id=361a4bd2&scoped=true&lang=css& in ./src/components/Hello.vue
* ./App.vue?vue&type=style&index=0&lang=scss& in ./src/App.vue

Other two errors, namely

* ./assets/logo.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90&
* ./assets/dj.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90&

happened for the same general reason and mistake: I had declared (ok I did not but I copied a config which did) a module (and that’s what was mentioned by the error, a module could not be found!), which I did not install, in this case: url-loader

installed it via npm install --save-dev url-loader and the error went away.

Basically, you have to watch out that all modules which are used by your webpack config files are also installed in node_modules.

E.g. my webpack config which caused the above problems looked like this:

module: {
		rules: [
			...
			{
				test: /\.vue$/,
				loader: 'vue-loader',
				options: vueLoaderConfig
			},
			{
				test: /\.js$/,
				loader: 'babel-loader',
				include: [resolve('src'), resolve('test')]
			},
			{
				test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
				loader: 'url-loader',
				options: {
					limit: 10000,
					name: utils.assetsPath('img/[name].[hash:7].[ext]')
				}
			},

see the url-loader for image files? (and of course postcss-loader for style files)

You can basically apply that rule for any module which is declared in the config but not appearing in package.json. Install it, the error might go away.