vue-loader not installed correctly

[YogliB]

Version

3.0.0-beta.15

Reproduction link

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

Steps to reproduce

1. vue create [folder-name]
2. cd [folder-name]
3. 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

[LinusBorg]

Probably related to / caused by this:

vuejs/vue-loader#1331

[yyx990803]

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

[chasebank]

I was getting the same thing from a cloned repo (cloned from my main computer where I haven't had any issues).

Tried the above npm update --depth=9999 vue-loader, but that didn't work. So, I referenced vuejs/vue-loader@0fb5172 and edited NS myself, and that seems to have done the trick.

[xiaomizhou66]

λ yarn serve                                                                                                                                                            
yarn run v1.12.3                                                                                                                                                        
$ vue-cli-service serve                                                                                                                                                 
 INFO  Starting development server...                                                                                                                                   
 94% after seal                                                                                                                                                         
                                                                                                                                                                        
 ERROR  Failed to compile with 1 errors                                                                                                                         15:02:54
                                                                                                                                                                        
                                                                                                                                                                        
 error  in ./src/main.js                                                                                                                                                
                                                                                                                                                                        
Module build failed (from ./node_modules/babel-loader/lib/index.js):                                                                                                    
ReferenceError: [BABEL] F:\qianduan_dir\00program\web-vue-cli3\todo-\src\main.js: Unknown option: .polyfills. Check out https://babeljs.io/docs/en/babel-core/#options f
or more information about options.                                                                                                                                      
    at throwUnknownError (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\config\validation\options.js:123:11)                                
    at Object.keys.forEach.key (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\config\validation\options.js:107:5)                           
    at Array.forEach (<anonymous>)                                                                                                                                      
    at validateNested (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\config\validation\options.js:83:21)                                    
    at validate (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\config\validation\options.js:74:10)                                          
    at instantiatePreset (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\config\full.js:244:36)                                              
    at cachedFunction (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\config\caching.js:33:19)                                               
    at loadPresetDescriptor (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\config\full.js:235:45)                                           
    at config.presets.reduce (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\config\full.js:77:21)                                           
    at Array.reduce (<anonymous>)                                                                                                                                       
    at recurseDescriptors (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\config\full.js:74:38)                                              
    at loadFullConfig (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\config\full.js:108:6)                                                  
    at process.nextTick (F:\qianduan_dir\00program\web-vue-cli3\todo-\node_modules\@babel\core\lib\transform.js:28:33)                                                  
    at _combinedTickCallback (internal/process/next_tick.js:131:7)                                                                                                      
    at process._tickCallback (internal/process/next_tick.js:180:9)                                                                                                      
                                                                                                                                                                        
 @ multi (webpack)-dev-server/client?http://192.168.2.103:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js                                                    
                                                                                                                                                                        

[nicaisa]

ERROR in ./resources/js/views/admin/main/index.vue?vue&type=template&id=fa8fd28a&scoped=true& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/admin/main/index.vue?vue&type=template&id=fa8fd28a&scoped=true&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
Error compiling template:

[jtlevy]

sameish here: "export 'default' (imported as 'mod') was not found in '-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DashCard.vue?vue&type=script&lang=js&'

[pixelyunicorn]

I am also having the same issue, but with a vue project on glitch.com using pnpm

 ERROR  Failed to compile with 1 errors3:57:00 AM

This dependency was not found:

* -!../../rbd/pnpm-volume/b2c7ff97-dc14-4295-b604-0cd2e497217b/node_modules/.registry.npmjs.org/cache-loader/1.2.5/webpack@4.28.4/node_modules/cache-loader/dist/cjs.js??ref--12-0!../../rbd/pnpm-volume/b2c7ff97-dc14-4295-b604-0cd2e497217b/node_modules/.registry.npmjs.org/babel-loader/8.0.5/@babel!core@7.2.2/node_modules/babel-loader/lib/index.js!../../rbd/pnpm-volume/b2c7ff97-dc14-4295-b604-0cd2e497217b/node_modules/.registry.npmjs.org/cache-loader/1.2.5/webpack@4.28.4/node_modules/cache-loader/dist/cjs.js??ref--0-0!../../rbd/pnpm-volume/b2c7ff97-dc14-4295-b604-0cd2e497217b/node_modules/.registry.npmjs.org/vue-loader/15.5.1/css-loader@1.0.1+webpack@4.28.4/node_modules/vue-loader/lib/index.js??vue-loader-options!./app.vue?vue&type=script&lang=js& in ./src/app.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save -!../../rbd/pnpm-volume/b2c7ff97-dc14-4295-b604-0cd2e497217b/node_modules/.registry.npmjs.org/cache-loader/1.2.5/webpack@4.28.4/node_modules/cache-loader/dist/cjs.js??ref--12-0!../../rbd/pnpm-volume/b2c7ff97-dc14-4295-b604-0cd2e497217b/node_modules/.registry.npmjs.org/babel-loader/8.0.5/@babel!core@7.2.2/node_modules/babel-loader/lib/index.js!../../rbd/pnpm-volume/b2c7ff97-dc14-4295-b604-0cd2e497217b/node_modules/.registry.npmjs.org/cache-loader/1.2.5/webpack@4.28.4/node_modules/cache-loader/dist/cjs.js??ref--0-0!../../rbd/pnpm-volume/b2c7ff97-dc14-4295-b604-0cd2e497217b/node_modules/.registry.npmjs.org/vue-loader/15.5.1/css-loader@1.0.1+webpack@4.28.4/node_modules/vue-loader/lib/index.js??vue-loader-options!./app.vue?vue&type=script&lang=js&

[tomjdickson]

Having the same problem, npm run serve was working fine. Installed fontawesome-free now I am unable to start the server.

This dependency was not found:

• in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./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&

EDIT: Inside my App.vue I had written import ""; this is what was causing my errors, removed the line and all is working again. Feel like this is a beginners mistake...

[mategvo]

I have the same issue.

ERROR in ./node_modules/css-loader/dist/cjs.js??ref--4-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css&
Module build failed: CssSyntaxError: /.../vue-hackernews-2.0/src/App.vue:1:1: Unknown word

[amirhosseindz]

same here after deleting HelloWorld.vue

• ./components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./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&

[jcrommar]

any fix to this? Having the same issue

[electrocnic]

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.

[AhmedVohra]

This relative module was not found:

• ../firebase in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Login.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/sections/ProductList.vue?vue&type=script&lang=js& and 4 others

Can someone tell me the solution? complete newbie in vue.

[rahulswimmer]

This error also occurs if node-sass module is not found.

Here's the solution:

sudo npm install --save-dev --unsafe-perm node-sass

Enjoy!