"You may need an appropiate loader to handle this file type" webpack and vue

Question

I'm trying to compile webpack with the command:

node_modules/.bin/webpack

and i get the error:

Module parse failed: 
/home/vagrant/Code/stream/resources/assets/js/views/Contact.vue 
Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

webpack show the error in each file with extension .vue

my routes looks like this

import VueRouter from 'vue-router';

let routes = [
{
    path: '/',
    component: require('./views/Home')
},

{
    path: '/about',
    component: require('./views/Test')
},

{
    path: '/contact',
    component: require('./views/Contact')
}
];

export default new VueRouter({
routes,
linkActiveClass: 'is-active'
});

This post helped me especially if you're using webpack v6 + https://stackoverflow.com/a/65609321/2867894 — omarjebari, Jan 20 '21 at 00:29

score 7 · Answer 1 · answered Jul 11 '17 at 11:15

7

As the error message implies:

You may need an appropriate loader to handle this file type.

You need to add vue-loader to your webpack configuration.

You can find an example of such an integration here:
https://github.com/vuejs-templates/webpack-simple

answered Jul 11 '17 at 11:15

str

42,689
17
109
127

Thanks for your answer, in webpack configuration i have a loader. You can check it here. [link](https://github.com/aws2-18/vueroutes/blob/master/webpack.config.js) . Anyway i try to follow the guide you post, and nothing, same error. You can download it and try it please? – Lluís Puig Ferrer Jul 11 '17 at 12:26
@str could you add an example of the integration into your answer here? – maxshuty May 03 '19 at 21:13

score 6 · Answer 2 · answered Mar 05 '19 at 15:28

6

I just recently solved this by reverting to vue-loader v14

npm install vue-loader@14 --save-dev.

Apparently v15 has some issues.

answered Mar 05 '19 at 15:28

gfyans

1,236
1
16
21

v14 `const vueComponent = () => import('./component.vue')` still not work – NikitaK Mar 22 '19 at 10:18

score 3 · Answer 3 · answered Apr 25 '18 at 22:38

3

I got a similar error, and was confused because I did have vue-loader and other vue components were working. In my case I had forgotten to specify the script language as TypeScript. See lang="ts" in this example:

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'

@Component({ name: 'readonlyrating' })
export default class ReadOnlyRating extends Vue {
...
}
</script>

answered Apr 25 '18 at 22:38

Daniel

3,021
5
35
50

Hm.. I have vue-loader and `ts` set as as script language. Yet I get this error. Followed MS's guide: https://github.com/Microsoft/TypeScript-Vue-Starter#single-file-components – thomthom Jun 05 '18 at 13:07

score 2 · Answer 4 · answered Jun 06 '19 at 17:30

2

In my case I had forgotten to add:

const { VueLoaderPlugin } = require('vue-loader')
...
plugins: [
  ...
  new VueLoaderPlugin(),
],

To the webpack configuration.

answered Jun 06 '19 at 17:30

Craig van Tonder

7,497
18
64
109

score 1 · Answer 5 · answered Feb 24 '21 at 10:47

Make sure you don't use keywords like "package" or others. This gave me the same error when using the PUG preprocessor, but at first I didn't know I was using the keyword. I replaced it with "item": v-for="package in packages" --> v-for="item in packages".

.table__wrapper

    .table__row(v-for="package in packages" :key="package.objectID")

        .table__row-name {{ package.name }}

"You may need an appropiate loader to handle this file type" webpack and vue

5 Answers5

Linked