vue-loader parse error for component decorator

Question

I have an issue using vue, typescript, webpack and component decorator.

Here is the error

ERROR in ./app/modules/popin-ratings-reviews/templates/HelloWorld.vue?vue&type=script&lang=ts (./node_modules/vue-loader/lib??vue-loader-options!./app/modules/popin-ratings-reviews/templates/HelloWorld.vue?vue&type=script&lang=ts) 10:0 Module parse failed: Unexpected character '@' (10:0) You may need an appropriate loader to handle this file type. | import { Component, Prop, Vue } from 'vue-property-decorator'; | @Component | export default class HelloWorld extends Vue { | message = 'hello world'; @ ./app/modules/popin-ratings-reviews/templates/HelloWorld.vue?vue&type=script&lang=ts 1:0-130 1:146-149 1:151-278 1:151-278 @ ./app/modules/popin-ratings-reviews/templates/HelloWorld.vue @ ./app/modules/popin-ratings-reviews/index.m.ts

It seems that webpack vue-loader can't parse the component decorator syntax. How can I fix that?

I just encountered the same issue. Did you find a solution already? — martink
– martink, Commented Aug 21, 2018 at 8:25

Mirza Andriamanamisoa · Accepted Answer · 2018-09-08 15:58:56Z

3

I have found the solution

This is the configuration for webpack rules that I use and it is working

rules: [
  {
    test: /\.tsx?$/,
    exclude: [
      /node_modules/
    ],
    use: {
      loader: "ts-loader",
      options: {
        appendTsSuffixTo: [/\.vue$/]
      }
    }
  },
  {
    test: /\.vue$/,
    use: {
      loader: "vue-loader"
    }
  }
  ...

answered Sep 8, 2018 at 15:58

Mirza Andriamanamisoa

4215 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rifi2k · Accepted Answer · 2019-01-08 19:11:06Z

0

I think it's more on the babel plugin side / --experimentalDecorators flag where your having the issue.

Required: ECMAScript stage 1 decorators. If you use Babel, babel-plugin-transform-decorators-legacy is needed. If you use TypeScript, enable --experimentalDecorators flag.

It does not support the stage 2 decorators yet since mainstream transpilers still transpile to the old decorators.

This seems to be what your looking for. https://github.com/vuejs/vue-class-component

answered Jan 8, 2019 at 19:11

rifi2k

1991 silver badge6 bronze badges

Collectives™ on Stack Overflow

vue-loader parse error for component decorator

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related