[bug] Vue SFC `<script setup lang='ts'>` breaks build

[talss89]

Agreement

• [X] This is not a duplicate of an existing issue
• [X] I have read the guidelines for Contributing to Roots Projects
• [X] This is not a personal support request that should be posted on the Roots Discourse community

Describe the issue

When using <script setup lang='ts'> syntax in a Vue 3 SFC, Bud fails to build in dev and prod.

Removing lang='ts' results in a working build

Expected Behavior

The build completes with no errors, SFC runs with expected <script setup> behaviour.

Actual Behavior

$ /app/vue-typescript/node_modules/.bin/bud dev

✘  @examples/vue-typescript ./dist [a9f74c576cf42e5b2627]
│
├─ ✘ error
│ 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 { openBlock as _openBlock, createBlock as _createBlock } from "vue"
│ |
│ > export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
│ |   return (_openBlock(), _createBlock($setup["TodoList"]))
│ | }

It seems like the loader is emitting TS, but being processed as JS. I don't know enough about the process to comment further.

Steps To Reproduce

1. Clone examples/vue-typescript
2. Remove @roots/bud-sass dependency (to bypass #2080)
3. Remove <style lang="scss"> blocks from both SFCs
4. yarn run bud dev

version

6.8.0 / 2023.2.3

Logs

devspace ./vue-typescript $ yarn run bud dev --log --verbose
yarn run v1.22.19
$ /app/vue-typescript/node_modules/.bin/bud dev --log --verbose
[@examples/vue-typescript] › ◉  log       {
  "basedir": "/app/vue-typescript",
  "bin": "node",
  "bud": {
    "basedir": "/app/vue-typescript/node_modules/@roots/bud",
    "label": "bud",
    "manifestPath": "/app/vue-typescript/node_modules/@roots/bud/package.json",
    "version": "6.8.0",
  },
  "config": {
    ".budfiles": {
      "absolutePath": "/app/vue-typescript/.budfiles",
      "bud": false,
      "dir": true,
      "dynamic": null,
      "extension": null,
      "file": false,
      "local": false,
      "mode": 16877,
      "module": undefined,
      "name": ".budfiles",
      "path": "/app/vue-typescript/.budfiles",
      "symlink": false,
      "type": "base",
    },
    "dist": {
      "absolutePath": "/app/vue-typescript/dist",
      "bud": false,
      "dir": true,
      "dynamic": null,
      "extension": null,
      "file": false,
      "local": false,
      "mode": 16877,
      "module": undefined,
      "name": "dist",
      "path": "/app/vue-typescript/dist",
      "symlink": false,
      "type": "base",
    },
    "node_modules": {
      "absolutePath": "/app/vue-typescript/node_modules",
      "bud": false,
      "dir": true,
      "dynamic": null,
      "extension": null,
      "file": false,
      "local": false,
      "mode": 16877,
      "module": undefined,
      "name": "node_modules",
      "path": "/app/vue-typescript/node_modules",
      "symlink": false,
      "type": "base",
    },
    "package.json": {
      "absolutePath": "/app/vue-typescript/package.json",
      "bud": false,
      "dir": false,
      "dynamic": false,
      "extension": "json",
      "file": true,
      "local": false,
      "mode": 33188,
      "module": [Object],
      "name": "package.json",
      "path": "/app/vue-typescript/package.json",
      "sha1": "eab320f308a3e8e436efe645bcc45b61625f8cd1",
      "size": 272,
      "symlink": false,
      "type": "base",
    },
    "src": {
      "absolutePath": "/app/vue-typescript/src",
      "bud": false,
      "dir": true,
      "dynamic": null,
      "extension": null,
      "file": false,
      "local": false,
      "mode": 16877,
      "module": undefined,
      "name": "src",
      "path": "/app/vue-typescript/src",
      "symlink": false,
      "type": "base",
    },
    "tsconfig.json": {
      "absolutePath": "/app/vue-typescript/tsconfig.json",
      "bud": false,
      "dir": false,
      "dynamic": false,
      "extension": "json",
      "file": true,
      "local": false,
      "mode": 33188,
      "module": [Object],
      "name": "tsconfig.json",
      "path": "/app/vue-typescript/tsconfig.json",
      "sha1": "e76d46b5c01aeec44b8f11cb8cd1908520755895",
      "size": 317,
      "symlink": false,
      "type": "base",
    },
    "types": {
      "absolutePath": "/app/vue-typescript/types",
      "bud": false,
      "dir": true,
      "dynamic": null,
      "extension": null,
      "file": false,
      "local": false,
      "mode": 16877,
      "module": undefined,
      "name": "types",
      "path": "/app/vue-typescript/types",
      "symlink": false,
      "type": "base",
    },
    "yarn.lock": {
      "absolutePath": "/app/vue-typescript/yarn.lock",
      "bud": false,
      "dir": false,
      "dynamic": false,
      "extension": "lock",
      "file": true,
      "local": false,
      "mode": 33188,
      "module": undefined,
      "name": "yarn.lock",
      "path": "/app/vue-typescript/yarn.lock",
      "sha1": "3b3bd2abb81ff4ef963341ec1a97fccbc59b057d",
      "size": 273164,
      "symlink": false,
      "type": "base",
    },
  },
  "extensions": {
    "builtIn": [
      "@roots/bud-entrypoints",
      "@roots/bud-terser",
      "@roots/bud-extensions/cdn",
      "@roots/bud-extensions/esm",
      "@roots/bud-extensions/fix-style-only-entrypoints",
      "@roots/bud-extensions/clean-webpack-plugin",
      "@roots/bud-extensions/copy-webpack-plugin",
      "@roots/bud-extensions/html-webpack-plugin",
      "@roots/bud-extensions/interpolate-html-webpack-plugin",
      "@roots/bud-extensions/mini-css-extract-plugin",
      "@roots/bud-extensions/webpack-define-plugin",
      "@roots/bud-extensions/webpack-hot-module-replacement-plugin",
      "@roots/bud-extensions/webpack-manifest-plugin",
      "@roots/bud-extensions/webpack-provide-plugin",
    ],
    "discovered": [
      "@roots/bud-typescript",
      "@roots/bud-vue",
    ],
  },
  "label": "@examples/vue-typescript",
  "logger": Logger {
    "commonPath": "",
    "instance": Signale {
      "_config": [Object],
      "_customTypes": [Object],
      "_disabled": false,
      "_generalLogLevel": "info",
      "_interactive": false,
      "_longestLabel": "watching",
      "_scopeName": [Array],
      "_secrets": [Array],
      "_stream": [WriteStream],
      "_timers": [Map],
      "_types": [Object],
      "await": [Function],
      "complete": [Function],
      "debug": [Function],
      "error": [Function],
      "fatal": [Function],
      "fav": [Function],
      "info": [Function],
      "log": [Function],
      "note": [Function],
      "pause": [Function],
      "pending": [Function],
      "star": [Function],
      "start": [Function],
      "success": [Function],
      "wait": [Function],
      "warn": [Function],
      "watch": [Function],
    },
  },
  "manifest": {
    "browserslist": [
      "extends @roots/browserslist-config",
    ],
    "devDependencies": {
      "@roots/bud": "latest",
      "@roots/bud-typescript": "latest",
      "@roots/bud-vue": "latest",
    },
    "name": "@examples/vue-typescript",
    "private": true,
    "type": "module",
  },
  "mode": "production",
  "services": [
    "@roots/bud/services/env",
    "@roots/bud-hooks",
    "@roots/bud-api",
    "@roots/bud-build",
    "@roots/bud-cache",
    "@roots/bud-compiler",
    "@roots/bud-dashboard",
    "@roots/bud-extensions",
    "@roots/bud-server",
    "@roots/bud/services/project",
    "@roots/bud-framework/services/console",
  ],
}
[@examples/vue-typescript] › ▶  initialize Initialized timer...
[@examples/vue-typescript] › ✔  success   instantiated env from @roots/bud/services/env
[@examples/vue-typescript] › ✔  success   instantiated compiler from @roots/bud-compiler
[@examples/vue-typescript] › ✔  success   instantiated project from @roots/bud/services/project
[@examples/vue-typescript] › ✔  success   instantiated extensions from @roots/bud-extensions
[@examples/vue-typescript] › ✔  success   instantiated consoleBuffer from @roots/bud-framework/services/console
[@examples/vue-typescript] › ✔  success   instantiated server from @roots/bud-server
[@examples/vue-typescript] › ✔  success   instantiated hooks from @roots/bud-hooks
[@examples/vue-typescript] › ✔  success   instantiated cache from @roots/bud-cache
[@examples/vue-typescript] › ✔  success   instantiated dashboard from @roots/bud-dashboard
[@examples/vue-typescript] › ✔  success   instantiated build from @roots/bud-build
[@examples/vue-typescript] › ✔  success   instantiated api from @roots/bud-api
[@examples/vue-typescript] › ✔  success   registered service callback: consoleBuffer.init
[@examples/vue-typescript] › ✔  success   registered service callback: env.bootstrap
[@examples/vue-typescript] › ✔  success   registered service callback: api.bootstrap
[@examples/vue-typescript] › ✔  success   registered service callback: extensions.register
[@examples/vue-typescript] › ✔  success   registered service callback: server.register
[@examples/vue-typescript] › ✔  success   registered service callback: build.register
[@examples/vue-typescript] › ✔  success   registered service callback: extensions.booted
[@examples/vue-typescript] › ✔  success   registered service callback: cache.booted
[@examples/vue-typescript] › ✔  success   registered service callback: extensions.configAfter
[@examples/vue-typescript] › ✔  success   registered service callback: extensions.buildBefore
[@examples/vue-typescript] › ✔  success   registered service callback: project.buildAfter
[@examples/vue-typescript] › ✔  success   registered service callback: extensions.buildAfter
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "@roots/bud-support/css-loader",
}
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "@roots/bud-support/csv-loader",
}
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "@roots/bud-support/file-loader",
}
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "@roots/bud-support/html-loader",
}
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "/app/vue-typescript/node_modules/mini-css-extract-plugin/dist/loader.js",
}
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "@roots/bud-support/remark-loader",
}
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "@roots/bud-support/style-loader",
}
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "@roots/bud-support/xml-loader",
}
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "@roots/bud-support/yml-loader",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "css",
  "loader": "css",
  "options": [Function],
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "cssModule",
  "loader": "css",
  "options": [Function],
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "csv",
  "loader": "csv",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "file",
  "loader": "file",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "html",
  "loader": "html",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "md",
  "loader": "md",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "minicss",
  "loader": "minicss",
  "options": [Function],
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "raw",
  "loader": "raw",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "style",
  "loader": "style",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "xml",
  "loader": "xml",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "yml",
  "loader": "yml",
}
[@examples/vue-typescript] [build] › ✔  success   set rule: toml
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "parser": [Function],
  "test": [Function],
  "type": "json",
}
[@examples/vue-typescript] [build] › ✔  success   set rule: xml
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "test": [Function],
  "use": [
    "xml",
  ],
}
[@examples/vue-typescript] [build] › ✔  success   set rule: csv
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    "/app/vue-typescript",
  ],
  "test": [Function],
  "use": [
    "csv",
  ],
}
[@examples/vue-typescript] [build] › ✔  success   set rule: yml
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "test": /\.ya?ml$/,
  "use": [
    "yml",
  ],
}
[@examples/vue-typescript] [build] › ✔  success   set rule: html
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "test": /\.(html?)$/,
  "use": [
    "html",
  ],
}
[@examples/vue-typescript] [build] › ✔  success   set rule: json
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "parser": [Function],
  "test": /\.json$/,
  "type": "json",
}
[@examples/vue-typescript] [build] › ✔  success   set rule: font
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "test": /\.(ttf|otf|eot|woff2?|ico)$/,
  "type": "asset",
}
[@examples/vue-typescript] [build] › ✔  success   set rule: svg
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "test": /\.svg$/,
  "type": "asset/resource",
}
[@examples/vue-typescript] [build] › ✔  success   set rule: webp
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "test": /\.webp$/,
  "type": "asset/resource",
}
[@examples/vue-typescript] [build] › ✔  success   set rule: image
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "test": /\.(png|jpe?g|gif|webp)$/,
  "type": "asset/resource",
}
[@examples/vue-typescript] [build] › ✔  success   set rule: inlineFont
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "resourceQuery": /inline/,
  "test": /\.(ttf|otf|eot|woff2?|ico)$/,
  "type": "asset/inline",
}
[@examples/vue-typescript] [build] › ✔  success   set rule: inlineSvg
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "generator": [Function],
  "include": [
    [Function],
  ],
  "resourceQuery": /inline/,
  "test": /\.svg$/,
  "type": "asset/inline",
}
[@examples/vue-typescript] [build] › ✔  success   set rule: inlineImage
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "resourceQuery": /inline/,
  "test": /\.(png|jpe?g|gif|webp)$/,
  "type": "asset/inline",
}
[@examples/vue-typescript] [build] › ✔  success   set rule: cssModule
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "test": /\.module\.css$/,
  "use": [
    "precss",
    "cssModule",
  ],
}
[@examples/vue-typescript] [build] › ✔  success   set rule: css
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "test": /(?!.*\.module)\.css$/,
  "use": [
    "precss",
    "css",
  ],
}
[@examples/vue-typescript] [build] › ✔  success   set rule: js
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "include": [
    [Function],
  ],
  "test": /\.(mjs|jsx?)$/,
  "use": [],
}
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-entrypoints
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-terser
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/cdn
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/esm
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/fix-style-only-entrypoints
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/clean-webpack-plugin
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/copy-webpack-plugin
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/html-webpack-plugin
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/interpolate-html-webpack-plugin
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/mini-css-extract-plugin
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/webpack-define-plugin
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/webpack-hot-module-replacement-plugin
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/webpack-manifest-plugin
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-extensions/webpack-provide-plugin
[@examples/vue-typescript] [module] › ℹ  info      resolved @roots/bud-entrypoints to node_modules/@roots/bud-entrypoints/lib/index.js
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/cdn
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/cdn imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/esm
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/esm imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/html-webpack-plugin
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/html-webpack-plugin imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/interpolate-html-webpack-plugin
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/interpolate-html-webpack-plugin imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/mini-css-extract-plugin
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/mini-css-extract-plugin imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/webpack-define-plugin
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/webpack-define-plugin imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/webpack-hot-module-replacement-plugin
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/webpack-hot-module-replacement-plugin imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/webpack-provide-plugin
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/webpack-provide-plugin imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-terser
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-terser/css-minimizer
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/fix-style-only-entrypoints
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/fix-style-only-entrypoints imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/clean-webpack-plugin
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/clean-webpack-plugin imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/copy-webpack-plugin
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/copy-webpack-plugin imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-extensions/webpack-manifest-plugin
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-extensions/webpack-manifest-plugin imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-terser/css-minimizer
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-terser/css-minimizer imported and instantiated
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-terser imported and instantiated
[@examples/vue-typescript] [module] › ✔  success   imported @roots/bud-entrypoints (optional)
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-entrypoints imported and instantiated
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-typescript
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-vue
[@examples/vue-typescript] [module] › ℹ  info      resolved @roots/bud-typescript to node_modules/@roots/bud-typescript/lib/index.js
[@examples/vue-typescript] [module] › ✔  success   imported @roots/bud-typescript (optional)
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-typescript/typecheck
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-vue
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-postcss
[@examples/vue-typescript] [extensions] › ℹ  info      importing @roots/bud-sass
[@examples/vue-typescript] [module] › ℹ  info      @roots/bud-postcss not resolvable (context: undefined)
[@examples/vue-typescript] [module] › ℹ  info      @roots/bud-sass not resolvable (context: undefined)
[@examples/vue-typescript] [module] › ℹ  info      @roots/bud-postcss could not be imported (optional) [Error: Cannot find package 'undefined' imported from /app/vue-typescript/node_modules/@roots/bud-framework/lib/module.js]
[@examples/vue-typescript] [module] › ℹ  info      @roots/bud-sass could not be imported (optional) [Error: Cannot find package 'undefined' imported from /app/vue-typescript/node_modules/@roots/bud-framework/lib/module.js]
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-vue imported and instantiated
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-typescript/typecheck
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-typescript/typecheck imported and instantiated
[@examples/vue-typescript] [extensions] › ✔  success   @roots/bud-typescript imported and instantiated
[@examples/vue-typescript] [@roots/bud-extensions/webpack-define-plugin] › ⬢  log       initialized
[@examples/vue-typescript] [@roots/bud-typescript/typecheck] › ⬢  log       initialized
[@examples/vue-typescript] [module] › ℹ  info      resolved typescript to node_modules/typescript/lib/typescript.js
[@examples/vue-typescript] [module] › ℹ  info      resolved vue-loader to node_modules/vue-loader/dist/index.js
[@examples/vue-typescript] [module] › ℹ  info      resolved vue-style-loader to node_modules/vue-style-loader/index.js
[@examples/vue-typescript] [@roots/bud-vue] › ✔  success   registered
[@examples/vue-typescript] [@roots/bud-typescript] › ✔  success   registered
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "/app/vue-typescript/node_modules/vue-loader/dist/index.js",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "vue",
  "loader": "vue",
}
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "/app/vue-typescript/node_modules/vue-style-loader/index.js",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "vue-style",
  "loader": "vue-style-loader",
}
[@examples/vue-typescript] [@roots/bud-vue] › ✔  success   booted
[@examples/vue-typescript] › ⬢  log       alias [
  [Function],
]
[@examples/vue-typescript] › ✔  success   bud.after: registered action
[@examples/vue-typescript] [@roots/bud-cache/invalidate-cache] › ✔  success   registered
[@examples/vue-typescript] › ✔  success   cache initialized
[@examples/vue-typescript] [@roots/bud-typescript] › ⬢  log       configAfter
[@examples/vue-typescript] [module] › ℹ  info      resolved ts-loader to node_modules/ts-loader/index.js
[@examples/vue-typescript] [build] › ℹ  info      set loader Loader {
  "_app": [Function],
  "src": "/app/vue-typescript/node_modules/ts-loader/index.js",
}
[@examples/vue-typescript] [build] › ℹ  info      set item Item {
  "_app": [Function],
  "ident": "ts",
  "loader": "ts",
  "options": [Function],
}
[@examples/vue-typescript] [build] › ✔  success   set rule: ts
[@examples/vue-typescript] [build] › ℹ  info      
 Rule {
  "_app": [Function],
  "exclude": undefined,
  "generator": [Function],
  "include": [
    [Function],
  ],
  "parser": [Function],
  "test": [Function],
  "type": undefined,
  "use": [
    "ts",
  ],
}
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-server/server/http
[@examples/vue-typescript] [module] › ℹ  info      imported webpack
[@examples/vue-typescript] [compiler] › ⬢  log       imported webpack 5.75.0
[@examples/vue-typescript] › ⬢  log       bud.build.make called
[@examples/vue-typescript] [@roots/bud-vue] › ℹ  info      buildBefore: @roots/bud-vue
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "test": /\.vue$/,
  "use": [
    {
      "ident": "vue",
      "loader": "/app/vue-typescript/node_modules/vue-loader/dist/index.js",
    },
  ],
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript",
  ],
  "parser": {
    "parse": [Function],
  },
  "test": /\.toml$/,
  "type": "json",
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript",
  ],
  "test": /\.xml$/,
  "use": [
    {
      "ident": "xml",
      "loader": "@roots/bud-support/xml-loader",
    },
  ],
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript",
  ],
  "test": /\.(csv|tsv)$/,
  "use": [
    {
      "ident": "csv",
      "loader": "@roots/bud-support/csv-loader",
    },
  ],
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript",
  ],
  "test": /\.ya?ml$/,
  "use": [
    {
      "ident": "yml",
      "loader": "@roots/bud-support/yml-loader",
    },
  ],
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript",
  ],
  "test": /\.(html?)$/,
  "use": [
    {
      "ident": "html",
      "loader": "@roots/bud-support/html-loader",
    },
  ],
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript",
  ],
  "parser": {
    "parse": undefined,
  },
  "test": /\.json$/,
  "type": "json",
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "test": /\.(ttf|otf|eot|woff2?|ico)$/,
  "type": "asset",
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "test": /\.svg$/,
  "type": "asset/resource",
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "test": /\.webp$/,
  "type": "asset/resource",
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "test": /\.(png|jpe?g|gif|webp)$/,
  "type": "asset/resource",
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "resourceQuery": /inline/,
  "test": /\.(ttf|otf|eot|woff2?|ico)$/,
  "type": "asset/inline",
}
[@examples/vue-typescript] › ℹ  info      {
  "generator": {
    "dataUrl": [Function],
  },
  "include": [
    "/app/vue-typescript/src",
  ],
  "resourceQuery": /inline/,
  "test": /\.svg$/,
  "type": "asset/inline",
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "resourceQuery": /inline/,
  "test": /\.(png|jpe?g|gif|webp)$/,
  "type": "asset/inline",
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "test": /\.module\.css$/,
  "use": [
    {
      "ident": "style",
      "loader": "@roots/bud-support/style-loader",
      "options": [Object],
    },
    {
      "ident": "cssModule",
      "loader": "@roots/bud-support/css-loader",
      "options": [Object],
    },
  ],
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "test": /(?!.*\.module)\.css$/,
  "use": [
    {
      "ident": "vue-style",
      "loader": "/app/vue-typescript/node_modules/vue-style-loader/index.js",
    },
    {
      "ident": "style",
      "loader": "@roots/bud-support/style-loader",
      "options": [Object],
    },
    {
      "ident": "css",
      "loader": "@roots/bud-support/css-loader",
      "options": [Object],
    },
  ],
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "test": /\.(mjs|jsx?)$/,
  "use": [
    {
      "ident": "ts",
      "loader": "/app/vue-typescript/node_modules/ts-loader/index.js",
      "options": [Object],
    },
  ],
}
[@examples/vue-typescript] › ℹ  info      {
  "include": [
    "/app/vue-typescript/src",
  ],
  "test": /\.(tsx?)$/,
  "use": [
    {
      "ident": "ts",
      "loader": "/app/vue-typescript/node_modules/ts-loader/index.js",
      "options": [Object],
    },
  ],
}
[@examples/vue-typescript] [build] › ✔  success   built bail
[@examples/vue-typescript] [build] › ✔  success   built cache
[@examples/vue-typescript] [build] › ✔  success   built context
[@examples/vue-typescript] [build] › ✔  success   built dependencies
[@examples/vue-typescript] [build] › ✔  success   built devtool
[@examples/vue-typescript] [build] › ✔  success   built entry
[@examples/vue-typescript] [build] › ✔  success   built externalsType
[@examples/vue-typescript] [build] › ✔  success   built infrastructureLogging
[@examples/vue-typescript] [build] › ✔  success   built mode
[@examples/vue-typescript] [build] › ✔  success   built module
[@examples/vue-typescript] [build] › ✔  success   built name
[@examples/vue-typescript] [build] › ✔  success   built node
[@examples/vue-typescript] [build] › ✔  success   built optimization
[@examples/vue-typescript] [build] › ✔  success   built output
[@examples/vue-typescript] [build] › ✔  success   built parallelism
[@examples/vue-typescript] [build] › ✔  success   built performance
[@examples/vue-typescript] [build] › ✔  success   built recordsPath
[@examples/vue-typescript] [build] › ✔  success   built stats
[@examples/vue-typescript] [build] › ✔  success   built target
[@examples/vue-typescript] [@roots/bud-extensions/webpack-manifest-plugin] › ✔  success   produced webpack plugin
[@examples/vue-typescript] [@roots/bud-entrypoints] › ✔  success   produced webpack plugin
[@examples/vue-typescript] [module] › ℹ  info      resolved @roots/bud-support/webpack to node_modules/@roots/bud-support/lib/webpack/index.js
[@examples/vue-typescript] [module] › ℹ  info      imported /app/vue-typescript/node_modules/@roots/bud-support/lib/webpack/index.js
[@examples/vue-typescript] [@roots/bud-extensions/webpack-hot-module-replacement-plugin] › ✔  success   imported @roots/bud-support/webpack
[@examples/vue-typescript] [@roots/bud-extensions/webpack-hot-module-replacement-plugin] › ✔  success   produced webpack plugin
[@examples/vue-typescript] [@roots/bud-vue] › ✔  success   produced webpack plugin
[@examples/vue-typescript] [build] › ✔  success   built resolve
[@examples/vue-typescript] [build] › ✔  success   built plugins
[@examples/vue-typescript] [build] › ✔  success   configuration successfully built
[@examples/vue-typescript] › ℹ  info      --debug not `true`. skipping fs write.
[@examples/vue-typescript] › ◼  initialize Timer run for: 1.89s
[@examples/vue-typescript] › ⬢  log       [webpack.cache.PackFileCacheStrategy] restore cache container: 24.01641 ms
[@examples/vue-typescript] › ⬢  log       [webpack.cache.PackFileCacheStrategy] Restored pack from /app/vue-typescript/.budfiles/@examples/vue-typescript/cache/development/@examples/vue-typescript.pack, but version doesn't match.
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-server/middleware/hot
[@examples/vue-typescript] [module] › ℹ  info      imported @roots/bud-server/middleware/dev
[server] › ℹ  info      listening
[server] › ⬢  log       [webpack-dev-middleware] Child "@examples/vue-typescript": Asset written to disk: "/app/vue-typescript/dist/manifest.json"
[server] › ⬢  log       [webpack-dev-middleware] Child "@examples/vue-typescript": Asset written to disk: "/app/vue-typescript/dist/entrypoints.json"
[server] › ⬢  log       [webpack-dev-middleware] Child "@examples/vue-typescript": Asset written to disk: "/app/vue-typescript/dist/js/main.js"
[server] › ⬢  log       [webpack-dev-middleware] Child "@examples/vue-typescript": Asset written to disk: "/app/vue-typescript/dist/js/dynamic/node_modules_roots_bud-client_lib_hot_client_js.chunk.js"
[server] › ⬢  log       [webpack-dev-middleware] Child "@examples/vue-typescript": Asset written to disk: "/app/vue-typescript/dist/js/dynamic/node_modules_roots_bud-client_lib_hot_components_indicator_index_js.chunk.js"
[server] › ⬢  log       [webpack-dev-middleware] Child "@examples/vue-typescript": Asset written to disk: "/app/vue-typescript/dist/js/dynamic/node_modules_roots_bud-client_lib_hot_components_overlay_index_js.chunk.js"
[@examples/vue-typescript] [dashboard] › ℹ  info      stats received MultiStats {
  "stats": [
    Stats {
      "compilation": [Compilation],
    },
  ],
}
[server] › ℹ  info      notification center called
[server] › ⬢  log       built @examples/vue-typescript (a9f74c576cf42e5b2627) in 2454ms
[server] › ⬢  log       [IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 0s.
[server] › ⬢  log       [webpack-dev-middleware] Compilation finished
[server] › ℹ  info      notifications only currently supported on macos
[server] › ✔  success   bud.after action executed
[server] › ⬢  log       [webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: ResolverCachePlugin|normal|default|dependencyType=|esm|path=|/app/vue-typescript/src|request=|index
[server] › ⬢  log       [webpack.cache.PackFileCacheStrategy] Storing pack...

✘  @examples/vue-typescript ./dist [a9f74c576cf42e5b2627]
│
├─ ✘ error
│ 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 { openBlock as _openBlock, createBlock as _createBlock } from "vue"
│ |
│ > export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
│ |   return (_openBlock(), _createBlock($setup["TodoList"]))
│ | }
│
├─ entrypoints
│ └─ main
│   └─ js/main.js   632.78 kB
│
│
└─ compiled 63 modules in 2s 454ms

ℹ server
╷
│
├─ dev: http://0.0.0.0:3000
│
└─ ipv4: http://10.2.3.43:3000

… watching project sources

Configuration

No `bud.config.js`

Relevant .budfiles

Bud does not generate `profile.json` or `webpack.config.js`

[kellymears]

Not sure why it works in the integration test and in other contexts but breaks in this simple reproduction.

I made a sandbox that replicates the issue, explains it (rather, explains my interpretation of it), and fixes it:

https://codesandbox.io/p/sandbox/hopeful-kate-glcvn4?file=%2Fbud.config.mjs

I'll probably apply a similar solution (using bud.js APIs) as a patch before circling back on figuring out why the integration tests are passing.

[talss89]

Thanks @kellymears - I've patched my bud.config.js as you describe, and it's all working now. I did notice the test pass - very strange.

[kellymears]

I think a very similar fix (plucking .scss rule from oneOf and moving it out into the top-level ruleset) might fix the issue from #2080 as well. Not confirmed yet.

[kellymears]

https://github.com/roots/bud/issues/2081#issuecomment-1416535399

I was wrong about this but it should be fixed by #2082. Guess we'll find out when nightly releases in a bit.

[kellymears]

Fixed in 2023.2.5

https://codesandbox.io/p/sandbox/flamboyant-tom-cx4fnh?file=%2Fpackage.json

[kellymears]

6.9.0 is released and contains a fix for this issue