Vue <script setup lang="ts"> breaks dev

bud
, ,
1

Hi everyone!

When I try to make Vue SFC with <script setup lang="ts"> my bud dev breaks.

I found out that this problem exists on bud 6.19 and newer.

bud dev works if I remove lang=“ts”
bud build works anyway

Also, if I remove lang=“ts” in the component imported for createApp, but leave it in the other components used in it, everything will work.
And if I remove in the component, but leave lang=“ts”, then everything will work too.

Similar old bug

Error:

│ │ Module parse failed: Unexpected token (5:27)
│ │ File was processed with these loaders:
│ │  * ../node_modules/vue-loader/dist/templateLoader.js
│ │  * ../node_modules/vue-loader/dist/index.js
│ │ You may need an additional loader to handle the result of these loaders.
│ │ | const _hoisted_1 = /*#__PURE__*/_createElementVNode("p", null, "This is VUE", -1 /* HOISTED */)
│ │ |
│ │ > export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
│ │ |   return (_openBlock(), _createElementBlock(_Fragment, null, [
│ │ |     _hoisted_1,

My packages:

"@roots/bud": "6.21.0",
"@roots/bud-sass": "6.21.0",
"@roots/bud-typescript": "6.21.0",
"@roots/bud-vue": "6.21.0",
"@roots/sage": "6.21.0",
"typescript": "^5.4.5"

Sorry, my english is bad and I use a translator.

2 Likes
2

I’ve got the same issue with the following packages:

    "@roots/bud": "6.20.0",
    "@roots/bud-eslint": "6.20.0",
    "@roots/bud-imagemin": "6.20.0",
    "@roots/bud-prettier": "6.20.0",
    "@roots/bud-swc": "6.20.0",
    "@roots/bud-tailwindcss": "6.20.0",
    "@roots/bud-vue": "6.20.0",
    "@roots/eslint-config": "6.20.0",
    "@roots/sage": "6.20.0",
1 Like
3

You can go back to bud version 6.18, run bud clean or bud dev --force (maybe other, i don’t remember) and work without errors.
I have not found a solution for any version after 6.18.

4

Having the same issue with bud dev on version 6.23.1 and going back to any version between 6.18 and 6.23.1 didn’t help. However, bud build works fine.

# package.json
"devDependencies": {
    "@roots/bud": "6.23.1",
    "@roots/bud-postcss": "6.23.1",
    "@roots/bud-sass": "6.23.1",
    "@roots/bud-swc": "6.23.1",
    "@roots/bud-tailwindcss": "6.23.1",
    "@roots/bud-vue": "6.23.1",
    "@roots/sage": "6.23.1"
  },

# bud dev
╭ sage [761fc60095f10001]                                                                                                                                                                                                                        ./public
│
│ │ Module parse failed: Unexpected token (3:27)
│ │ File was processed with these loaders:
│ │  * ../node_modules/vue-loader/dist/templateLoader.js
│ │  * ../node_modules/vue-loader/dist/index.js
│ │ You may need an additional loader to handle the result of these loaders.
│ │ | import { createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
│ │ |
│ │ > export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
│ │ |   return (_openBlock(), _createElementBlock("div", null, [
│ │ |     _createVNode($setup["Modal"], null, {
│
│ │ Module parse failed: Unexpected token (43:27)
│ │ File was processed with these loaders:
│ │  * ../node_modules/vue-loader/dist/templateLoader.js
│ │  * ../node_modules/vue-loader/dist/index.js
│ │ You may need an additional loader to handle the result of these loaders.
│ │ | ], -1 /* HOISTED */)
│ │ |
│ │ > export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
│ │ |   return (_openBlock(), _createElementBlock("div", null, [
│ │ |     _createElementVNode("aside", _hoisted_1, [
│
╰ 2 errors