CODEWITHSUNDEEP
webpackvue.js
Lluís Puig Ferrer
Lluís Puig Ferrer

Reputation: 1146

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

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'
});

Upvotes: 13

Views: 39642

Answers (5)

mark nikolsky
mark nikolsky

Reputation: 66

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 }}

Upvotes: 1

Craig van Tonder
Craig van Tonder

Reputation: 7677

In my case I had forgotten to add:

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

To the webpack configuration.

Upvotes: 2

gfyans
gfyans

Reputation: 1256

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

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

Apparently v15 has some issues.

Upvotes: 6

Daniel
Daniel

Reputation: 3131

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>

Upvotes: 3

str
str

Reputation: 44959

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

Upvotes: 7

Related Questions