Issue?

[ghost]

Just after import I get this Error:

ERROR in ./~/vue-star-rating/src/star-rating.vue Module parse failed: .../node_modules/vue-star-rating/src/star-rating.vue Unexpected token (1:0) You may need an appropriate loader to handle this file type. | <template> | <div> | <div @mouseleave="resetRating" id="stars">

...imported in a project with a lot of other dependencies, all installed with npm, all included in package.json (using webpack and Vue 2.1.8 )
Can't see any error, do you have a hint?

[craigh411]

When using npm, you are transpiling the .vue files themselves, so you will need to make sure you have vue-loader and babel-loader in your project (because the component is written in ES6). I tried this out with webpack-simple and it compiles correctly. I don't really use webpack day to day, but I think you will need to make sure you have the following in your webpack config:

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
    ]
  }

You can see the config I worked with at: https://github.com/vuejs-templates/webpack-simple/blob/master/template/webpack.config.js#L11

To get babel to work, you need to include babel-core and babel-preset-es2015

Then create a .babelrc file in the root of your project and add the following:

{
  "presets": [
    ["es2015"]
  ]
}

[ghost]

Hmm,
babel-loader / -transpiler and vue-loader are already included and running - my whole project is written in ES6 and everything else is working fine...

So I think I need to invest some time in webpack and debug what's really happening.

Anyway, thanks for your reply!

[ghost]

Okay, I found my mistake - I excluded vue-loader for the node_modules -directory...

Thanks for your help!

[craigh411]

Excellent! thanks for following up with your solution. I will close this issue now.