console cannot find path function on the playground

[gweesin]

Vue version

3.5.16

Link to minimal reproduction

https://play.vuejs.org/#eNp9kU9LAzEQxb/KmMsq1F1K1UPZFlQK6kFFBS8BKdvpNjWbhPxZC8t+dydZWnuQ3jLvvZn8MunYrTF5G5BNWekqK4wHhz6YOVeiMdp66MDiGnpYW91ARtGMK64qrZyHxtUwi/559oBSavjUVq7OsguuymIYR4Oo8NgYufRIFUC5Gc+7LjX3fVlQlVShTPDQXjZ6hXLGGfmcQUFmWRz1sxHzjq5fizrfOq2IvIv9nFW6MUKifTFeEB5nU0hO9JZE9/OUNG8DjvZ6tcHq+x9963ZR4+zVokPbImcHzy9tjX6wF+/PuKPzwST6ICl9wnxDp2WIjEPsLqgVYR/lEu1j2r9Q9Ydb7Dwqt39UBI3JPuU5oz+5P/H0P9xJfpX6uOppi18t2jiTFjjJr/PxDet/AWCOrLM=

Steps to reproduce

1. Visiting the minimal reproduction
2. Using Ctrl + Shift + I to open Browser Dev Tools
3. Click Console panel

What is expected?

Nothing be warned.

What is actually happening?

vue.worker-Dc6PZdLj-C1ykw0lc.js:16133 Language service plugin "vue-template (html)" (8) failed to provide document feature for volar-embedded-content://template/file%253A%252F%252F%252Fsrc%252FApp.vue. TypeError: path.basename is not a function
    at getSelfComponentName (vue.worker-Dc6PZdLj-C1ykw0lc.js:145334:28)
    at _getComponentNames (vue.worker-Dc6PZdLj-C1ykw0lc.js:145397:50)
    at Object.getComponentSpans (vue.worker-Dc6PZdLj-C1ykw0lc.js:145600:77)
    at Object.provideDocumentSemanticTokens (vue.worker-Dc6PZdLj-C1ykw0lc.js:146018:63)
    at tokens.map.range.start.line (vue.worker-Dc6PZdLj-C1ykw0lc.js:18625:62)
    at vue.worker-Dc6PZdLj-C1ykw0lc.js:16111:62
    at safeCall (vue.worker-Dc6PZdLj-C1ykw0lc.js:16130:23)
    at docsWorker (vue.worker-Dc6PZdLj-C1ykw0lc.js:16111:47)
    at async languageFeatureWorker (vue.worker-Dc6PZdLj-C1ykw0lc.js:16068:14)
    at async Object.getSemanticTokens (vue.worker-Dc6PZdLj-C1ykw0lc.js:18613:25)

System Info

Any additional comments?

No response

[gweesin]

I've traced the bug and found that it's related to this line of code: https://github.com/vuejs/language-tools/blob/2adda8ef924565f9786279ffc8dd4707ae66fb02/packages/typescript-plugin/lib/utils.ts#L6

When running the pnpm run build command on the vue-repl project, we receive the following warning:

[plugin vite:resolve] Module "node:path" has been externalized for browser compatibility, imported by "D:/third-party/vue-repl/node_modules/.pnpm/@vue+typescript-plugin@2.2.2_typescript@5.7.3/node_modules/@vue/typescript-plugin/lib/requests/utils.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

This issue appears to be fixed in the latest version, @vue/typescript-plugin@3.0.0-beta.2, as seen here: https://github.com/vuejs/language-tools/blob/6315fe8901deeb25786451d5d1b94d0219f58912/packages/typescript-plugin/lib/requests/utils.ts#L3

Therefore, before the official v3 release, a workaround is to add an alias configuration for node:path, such as:

export default defineConfig({
  resolve: {
    alias: {
      // ...
      'node:path': 'path-browserify'
    },
  }
})

[edison1105]

duplicate of vuejs/repl#329