Incorrect transform of Vue components written in `TSX`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 275
- Forks
- 35
- Avg merge
- 4h 42m
- Merged PRs (30d)
- 6
Description
Describe the bug
When transform tsx components, they are converted to js files using the jsx function from vue/jsx-runtime. This results in warnings from Vue, as shown in the screenshot below. Code is how it looks in the browser.
export default defineComponent({
setup(_, { slots }) {
return () => /* @__PURE__ */ jsx(
"div",
{
children: slots.default?.()
}
);
}
});
However, if the tsx components are left as is, they are converted to js files using the createVNode function from vue. In this case, no errors occur. Code is how it looks in the browser.
const __default__ = defineComponent({
setup(_, {
slots
}) {
return () => _createVNode("div", {
"data-v-inspector": ".nuxt/layouts.wms-auth.300d01f6.tsx:6:3"
}, [slots.default?.()]);
}
});
export default __default__
Reproduction
I can't provide reproduction because I'm using an internal UI Kit
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No repository files, tests, or reproducible case are provided. Start by locating the TSX component transformation entry point and compare output using vue/jsx-runtime with output using createVNode. Done means TSX components transform without the reported Vue warnings, with a regression test covering the generated output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100