Incorrect transform of Vue components written in `TSX`

alSergey commented 5 months ago

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

alSergey commented 4 months ago

Hi, is there any progress on this issue?

manniL commented 4 months ago

@alSergey can you kindly provide a minimal reproduction. you don't have to use your internal ui components for that.

github-actions[bot] commented 4 months ago

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the `needs-reproduction` label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. Please provide a link to either :

a public GitHub repository
a CodeSandbox
a StackBlitz.

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

What happens if I don't provide a sufficient minimal reproduction?

Issues with the needs-reproduction label that receives no meaningful activity (e.g. new comments with a reproduction link) will be closed by the maintainers and won't be looked at.

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using a reaction on the topmost comment.

Please do not comment "I have the same issue" without repro steps
Please do not comment un-helpful messages such as "+1" on an issue, use reactions on the first comment instead.

I think my reproduction is good enough, why aren't you looking into it quicker?

We constantly monitor open issues for new comments.

However, sometimes we might miss one or two. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible.

I have a minimal reproduction to contribute to a closed issue.

If you have a minimal reproduction for a closed issue, please write a comment on the issue with a link to the reproduction. We will review it and reopen the issue if it is sufficient.

Useful Resources

alSergey commented 4 months ago

@manniL StackBlitz

Transform `tsx` by `nuxt-module-build`

Open StackBlitz
Run npm run start:js
Open the application in a separate tab
Go to page /auth-error
Open DevTools, Sources tab
Find dist/runtime/pages/auth-error

Here you can see that the tsx function from vue/jsx-runtime is used.

Transform `tsx` by `nuxt`

Open StackBlitz
Run npm run start:tsx
Open the application in a separate tab
Go to page /auth-error
Open DevTools, Sources tab
Find dist/runtime/pages/auth-error

Here you can see that the createVnode function from vue is used.

Unfortunately, I can't provide a reproduction for warnings from Vue. I catch them when using my internal UI Kit.

alSergey commented 2 months ago

@danielroe @manniL hi, sorry to poke you again, the question is important to me. Is there any progress on this issue? I really want to use @nuxt/module-builder, but I can't because of this bug.

nuxt / module-builder