Missing support for alternative template language

[binhonglee]

When replacing babel-preset-typescript-vue with this, it seems like it would throw an error if / when a language is specified for the template (example file).

Attached error log:

SyntaxError: /path/to/GlobeTrotte/plz-out/tmp/src/cockpit/tests/views/_views#vMyAccount._test/run_1/src/cockpit/views/vMyAccount.vue: Unexpected token, expected "," (1:10)

          ---
            loc: {"line":1,"column":10}
            pos: 10
            code: BABEL_PARSE_ERROR
            name: SyntaxError
            message: /path/to/GlobeTrotte/plz-out/tmp/src/cockpit/tests/views/_views#vMyAccount._test/run_1/src/cockpit/views/vMyAccount.vue: Unexpected token, expected "," (1:10)

> 1 | <template lang="pug">
    |           ^
  2 |   .my_account
  3 |     h1.title My Account
  4 |     el-link.unconfirmedEmailLink(:href="unconfirmedLink" :underline="false")
            at: 4 |     el-link.unconfirmedEmailLink(:href="unconfirmedLink" :underline="false")
Object._raise (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.13.16/node_modules/@babel/parser/src/parser/error.js:97:45)
Object.raiseWithData (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.13.16/node_modules/@babel/parser/src/parser/error.js:92:17)
Object.raise (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.13.16/node_modules/@babel/parser/src/parser/error.js:41:17)
Object.unexpected (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.13.16/node_modules/@babel/parser/src/parser/util.js:161:16)
Object.expect (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.13.16/node_modules/@babel/parser/src/parser/util.js:138:28)
Object.tsParseDelimitedListWorker (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.13.16/node_modules/@babel/parser/src/plugins/typescript/index.js:324:16)
Object.tsParseDelimitedList (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.13.16/node_modules/@babel/parser/src/plugins/typescript/index.js:284:14)
Object.tsParseBracketedList (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.13.16/node_modules/@babel/parser/src/plugins/typescript/index.js:346:27)
Object.tsParseTypeParameters (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.13.16/node_modules/@babel/parser/src/plugins/typescript/index.js:447:26)
/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.13.16/node_modules/@babel/parser/src/plugins/typescript/index.js:2593:31
          ...

[Coldsewoo]

Hello.
You may want to use babel-preset-typescript-vue if using Vue.js 2 since this preset only works for Vue.js 3 project.

[binhonglee]

I'm actually trying to migrate my project over to Vue 3 and this seems to be a supported use case with Vue 3 SFC.

vuejs/core#1120

[Coldsewoo]

Could you provide more detailed information when you got the error?

The link you have provided seems not to be related to what your error message saying.

And also, this package is not the babel parser, instead a preset for properly letting the parser understand how to parse <script lang="ts"> tag in .vue file, and the actual parsing part is done by @babel/parser (as your error is from @babel/parser).
Plus, this preset only cares about the script tag and not much related to the template tag.

Added test with pug template passed without error (link), and it seems your example file is written in Vue.js 2.

[binhonglee]

Thanks for explaining in detail. I upgraded the code to Vue 3 (file) and I'm still facing this issue.

SyntaxError: /path/to/GlobeTrotte/plz-out/tmp/src/cockpit/tests/views/_views#v404._test/run_1/src/cockpit/views/v404.vue: Unexpected token, expected "," (1:10)

          ---
            loc: {"line":1,"column":10}
            pos: 10
            code: BABEL_PARSE_ERROR
            reasonCode: UnexpectedToken
            name: SyntaxError
            message: /path/to/GlobeTrotte/plz-out/tmp/src/cockpit/tests/views/_views#v404._test/run_1/src/cockpit/views/v404.vue: Unexpected token, expected "," (1:10)

> 1 | <template lang="pug">
    |           ^
  2 | ._404.narrow_content
  3 |   h3 Uhh, there's nothing to see here...
  4 | </template>
            at: 4 | </template>
Object._raise (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.14.1/node_modules/@babel/parser/src/parser/error.js:134:45)
Object.raiseWithData (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.14.1/node_modules/@babel/parser/src/parser/error.js:129:17)
Object.raise (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.14.1/node_modules/@babel/parser/src/parser/error.js:78:17)
Object.unexpected (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.14.1/node_modules/@babel/parser/src/parser/util.js:173:16)
Object.expect (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.14.1/node_modules/@babel/parser/src/parser/util.js:138:28)
Object.tsParseDelimitedListWorker (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.14.1/node_modules/@babel/parser/src/plugins/typescript/index.js:385:16)
Object.tsParseDelimitedList (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.14.1/node_modules/@babel/parser/src/plugins/typescript/index.js:345:14)
Object.tsParseBracketedList (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.14.1/node_modules/@babel/parser/src/plugins/typescript/index.js:407:27)
Object.tsParseTypeParameters (/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.14.1/node_modules/@babel/parser/src/plugins/typescript/index.js:508:26)
/path/to/GlobeTrotte/node_modules/.pnpm/@babel+parser@7.14.1/node_modules/@babel/parser/src/plugins/typescript/index.js:2748:31

I'll look into it further elsewhere.

[Coldsewoo]

Hello,
I have seen vite is used for your project, and vite internally uses esbuild for bundling.
Esbuild is kind of the replacement of loaders and babel used in webpack, and maybe the errors come from both settings conflicting.
Remove the babel and loader part and you will be fine I think, and you don't need to use this preset also.