Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(vue3): ensure 3rd party components directly imported in script setup do not show up as Anonymous Component in devtools #2020

Merged
merged 2 commits into from
Jan 20, 2023

Conversation

LinusBorg
Copy link
Member

Description

When we import and use a 3rd Party component in <script setup> like in the following example, it will show up as <Anonymous Component> in devtools.

<script setup>
import Child from 'cool-ui-library'
</script>
<template>
   <Child />
</template

This PR makes devtools fall back on the internal __name property added by @vitejs/plugin-vue (this name is derrived from the filename) if no explicit name has been set.

Additional context

I'm not sure how to add a test case for this. But I hope the fix is trivial enough to do without one.


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • [ x Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).

@Akryum Akryum changed the title fix: ensure 3rd party components directly imported in script setup do not show up as Anonymous Component in devtools fix(vue3): ensure 3rd party components directly imported in script setup do not show up as Anonymous Component in devtools Jan 20, 2023
@Akryum Akryum merged commit 7dbe206 into main Jan 20, 2023
@Akryum Akryum deleted the linusborg/fix-compiled-component-name branch January 20, 2023 09:48
Lms24 referenced this pull request in getsentry/sentry-javascript Aug 28, 2024
In some cases, Vue components do not have `options.name` defined, but
instead have `options.__name`. Such components will be displayed as
anonymous in Sentry and currently won't be matched in `trackComponents`.

The same fix was also done in Vue devtools (vuejs/devtools#2020). In my
case, the problem were components from my own project, but this change
also fixes that.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants