Nuxt 3: Objects are not valid as a React child

[ekkaiasmith]

Even with SSR disabled, the same error Objects are not valid as a React child appears in Nuxt 3 projects using Veaury. Is there a minimal working Nuxt 3 template project available somewhere?

[futurfuturfuturfutur]

Hey! Faced the same problem, and I think I figured this out. The problem is veaury initialized vite vue plugin inside veauryVitePlugins function, and Nuxt 3 do the same under the hood. I don't know exactly how, but seems they are conflicting. The vite vue plugin is the first element of the array which is returned by veauryVitePlugins function. The solution is simple, just to remove first element of the array and then pass it to the vite plugins.

// nuxt.config.ts
import veauryVitePlugins from 'veaury/vite/index.js'

const veaury = veauryVitePlugins({
  type: 'vue',
});
veaury.shift();

...

vite: {
    plugins: [
      veaury
    ],
    ...
},
...

[Jesus82]

@futurfuturfuturfutur Would you mind explaining how did you make it work? I'm right now facing the same problem, trying to render a very simple component in nuxt 3.12.4. I followed your install and my component looks like this:

<template>
  <ClientOnly>
    <TestComponent />
  </ClientOnly>
</template>

<script setup>
import { applyReactInVue } from 'veaury'
import TestReactComponent from '../../test/test-react-component.jsx'

const TestComponent = applyReactInVue(TestReactComponent)
</script>

test/test-react-component.jsx

import React from 'react'

export default function TestReactComponent() {
  return (
    <div>
      <h1>Test React Component</h1>
    </div>
  )
}