Skip to content

Incorrect transform of Vue components written in TSX #293

Open
@alSergey

Description

@alSergey

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?.()
      }
    );
  }
});

image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingupstream

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions