Unexpected token ' : ' from babel-loader


#1

Hello, I use vue-property-decorator and im trying to incoprorate babel to be able to use jsx (tsx) in my singel file components. But I get the following error:

Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/pathtoFile/StateBadge.vue: Unexpected token (9:7)

00%201

.babelrc :
{
  "presets": ["@babel/preset-env"],
  "plugins": ["transform-vue-jsx",["@babel/plugin-proposal-decorators", { "legacy": true }],"@babel/plugin-proposal-class-properties"]
}
packgae.json:
"devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-typescript": "^7.1.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.0.4",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0"
  }

I do have vue ,vue-loader,webpack etc as well, but I thought the above was the most relevant.

webpack.config.js:
     {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        }
      },
      {
        test: /\.tsx$/,
        loader: 'babel-loader',
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },

Any idea on what is wrong?


#2

You seem to be using Typescript annotations (state: string), but in your webpack config you don’t use ts-loader for .tsx files, you only use babel-loader - which doesn’t understand Typescript. You should use both:

{
  test: /\.tsx$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/],
        transpileOnly: true
      }
    }
  ]
},

#3

Oh okej, yes I am using typescript. I tried using both loaders and now I get:

ERROR in Badge.vue.ts
./src/components/common/Badge.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/Badge.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in Badge.vue.ts(31,19)
      TS1005: '>' expected.

ERROR in Badge.vue.ts
./src/components/common/Badge.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/Badge.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in Badge.vue.ts(31,24)
      TS1005: '{' expected.

ERROR in Badge.vue.ts
./src/components/common/Badge.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/Badge.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in Badge.vue.ts(31,30)
      TS1005: ':' expected.

ERROR in Badge.vue.ts
./src/components/common/Badge.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/Badge.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in Badge.vue.ts(31,48)
      TS1005: ':' expected.

ERROR in Badge.vue.ts
./src/components/common/Badge.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/Badge.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in Badge.vue.ts(31,65)
      TS1161: Unterminated regular expression literal.

ERROR in TestEvents.vue.ts
./src/components/common/TestEvents.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/TestEvents.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in TestEvents.vue.ts(100,22)
      TS1005: '>' expected.

ERROR in TestEvents.vue.ts
./src/components/common/TestEvents.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/TestEvents.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in TestEvents.vue.ts(100,37)
      TS1109: Expression expected.

ERROR in TestEvents.vue.ts
./src/components/common/TestEvents.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/CarEvents.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in TestEvents.vue.ts(101,10)
      TS1110: Type expected.

ERROR in TestEvents.vue.ts
./src/components/common/TestEvents.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/TestEvents.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in TestEvents.vue.ts(101,11)
      TS1161: Unterminated regular expression literal.

ERROR in StateBadge.vue.ts
./src/components/common/StateBadge.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/StateBadge.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in StateBadge.vue.ts(24,19)
      TS1005: '>' expected.

ERROR in StateBadge.vue.ts
./src/components/common/StateBadge.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/StateBadge.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in StateBadge.vue.ts(24,29)
      TS1109: Expression expected.

ERROR in StateBadge.vue.ts
./src/components/common/StateBadge.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/StateBadge.vue?vue&type=script&lang=tsx&)
[tsl] ERROR in StateBadge.vue.ts(24,30)
      TS1109: Expression expected.

ERROR in ./src/components/common/Badge.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/Badge.vue?vue&type=script&lang=tsx&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/xxxx/src/components/common/Badge.vue: Invalid left-hand side in assignment expression (45:30)

  43 |     });
  44 |     Badge.prototype.render = function (h) {
> 45 |         return /** @class */ (function () {
     |                               ^
  46 |             function class_1() {
  47 |             }
  48 |             return class_1;
    at _class.raise (/Users/axxxx/node_modules/@babel/parser/lib/index.js:4028:15)
   .
   .
ERROR in ./src/components/common/TestEvents.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/TestEvents.vue?vue&type=script&lang=tsx&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/xxxxx/src/components/common/TestEvents.vue: Unexpected token (105:43)

  103 |             }
  104 |         };
> 105 |         return (__assign({}, tableData) /  >
      |                                            ^
  106 |             /div>);
  107 |     };
  108 |     __decorate([
    at _class.raise (/Users/xxxxx/node_modules/@babel/parser/lib/index.js:4028:15)
    at _class.unexpected (/Users/xxx/node_modules/@babel/parser/lib/index.js:5359:16)
   .
   .
   .

ERROR in ./src/components/common/StateBadge.vue?vue&type=script&lang=tsx& (./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--2-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/StateBadge.vue?vue&type=script&lang=tsx&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/xxx/src/components/common/StateBadge.vue: Unexpected token (45:38)

  43 |             }
  44 |         };
> 45 |         return (__assign({}, data) /  > );
     |                                       ^
  46 |     };
  47 |     __decorate([
  48 |         Prop({ required: true })
    at _class.raise (/Users/xxxx/node_modules/@babel/parser/lib/index.js:4028:15)
    .
    .
    .
ℹ 「wdm」: Failed to compile.