Vue3+TypeScript+Quasar扩展yarn build语法错误求助

错误原因 #

报错显示解析器（acorn-jsx）误将Vue模板识别为JSX语法，无法处理Vue特有的:（v-bind缩写）语法，导致解析:label="title"时抛出意外token错误。核心原因是buble插件在处理.vue文件时，错误启用了JSX解析逻辑，未使用Vue专用的模板编译器。

解决步骤 #

• 修正build配置：确保build/index.js中对.vue文件使用vue-loader（或Vue3对应的@vue/compiler-sfc）处理模板部分，而非直接用buble解析。
• 调整buble规则：在buble配置中排除.vue文件，或禁用JSX解析插件，避免其尝试解析Vue模板。
• 升级依赖版本：若buble、acorn-jsx版本过旧，升级到兼容Vue3的版本，确保解析器能正确区分Vue模板与JSX。

验证修改 #

调整配置后重新执行yarn build，确认语法错误消失，组件可正常打包发布至npm。

原Vue代码 #

<template>
  <div>
    <QBadge :label="title" class="MyComponent" />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { QBadge } from 'quasar';

export default defineComponent({
  name: 'MyComponent',
  components: { QBadge },
  props: {
    title: {
      type: String as PropType<'hello'>,
      default: () => 'hello',
    },
  },
  setup() {
    return {};
  },
});
</script>

原报错信息 #

SyntaxError: Unexpected token (3:18)
    at pp$4.raise (C:\Users\eunjin\Documents\workspace\quasar-ui\ui\node_modules\buble\node_modules\acorn\dist\acorn.js:2825:15)
    at pp.unexpected (C:\Users\eunjin\Documents\workspace\quasar-ui\ui\node_modules\buble\node_modules\acorn\dist\acorn.js:689:10)
    at _class.jsx_parseIdentifier (C:\Users\eunjin\Documents\workspace\quasar-ui\ui\node_modules\acorn-jsx\index.js:257:14)
    at _class.jsx_parseNamespacedName (C:\Users\eunjin\Documents\workspace\quasar-ui\ui\node_modules\acorn-jsx\index.js:266:23)
    at _class.jsx_parseAttribute (C:\Users\eunjin\Documents\workspace\quasar-ui\ui\node_modules\acorn-jsx\index.js:343:24)
    at _class.jsx_parseOpeningElementAt (C:\Users\eunjin\Documents\workspace\quasar-ui\ui\node_modules\acorn-jsx\index.js:356:35)
    at _class.jsx_parseElementAt (C:\Users\eunjin\Documents\workspace\quasar-ui\ui\node_modules\acorn-jsx\index.js:378:33)
    at _class.jsx_parseElementAt (C:\Users\eunjin\Documents\workspace\quasar-ui\ui\node_modules\acorn-jsx\index.js:391:32)
    at _class.jsx_parseElementAt (C:\Users\eunjin\Documents\workspace\quasar-ui\ui\node_modules\acorn-jsx\index.js:391:32)
    at _class.jsx_parseElement (C:\Users\eunjin\Documents\workspace\quasar-ui\ui\node_modules\acorn-jsx\index.js:436:19) {
  pos: 37,
  loc: Position {
    line: 3,
    column: 18,
    file: 'C:\\Users\\eunjin\\Documents\\workspace\\quasar-ui\\ui\\src\\components\\Component.vue'
  },
  raisedAt: 38,
  snippet: '1 : <template>\n' +
    '2 :   <div>\n' +
    '3 :     <QBadge :label="title" class="MyComponent" />\n' +
    '                      ^',
  toString: [Function (anonymous)],
  plugin: 'buble',
  frame: '1 : <template>\n' +
    '2 :   <div>\n' +
    '3 :     <QBadge :label="title" class="MyComponent" />\n' +
    '                      ^',
  code: 'PLUGIN_ERROR',
  hook: 'transform',
  id: 'C:\\Users\\eunjin\\Documents\\workspace\\quasar-ui\\ui\\src\\components\\Component.vue',
  watchFiles: [
    'C:\\Users\\eunjin\\Documents\\workspace\\quasar-ui\\ui\\src\\index.common.js',
    'C:\\Users\\eunjin\\Documents\\workspace\\quasar-ui\\ui\\src\\vue-plugin.js',
    'C:\\Users\\eunjin\\Documents\\workspace\\quasar-ui\\ui\\src\\components\\Component.vue'
  ]
}
[css]  dist\index.css                              0.15kb (gzipped:   0.15kb)
[css]  dist\index.rtl.css                          0.15kb (gzipped:   0.15kb)
[css]  dist\index.min.css                          0.14kb (gzipped:   0.14kb)
[css]  dist\index.rtl.min.css                      0.14kb (gzipped:   0.14kb)
Done in 2.26s.

内容的提问来源于stack exchange，提问作者jinie kim