BuilderText component was made reactive - Vue 3 error

Bugs
1

Hi,

We’m using Builder with the vue3 SDK (@builder.io/sdk-vue/vue3) and Nuxt.
I’m getting a warning in the console that says that :

Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref. 
Component that was made reactive:  { name: 'builder-text', props: [ 'text' ], render: [Function: Tt] }

From my investigation, it seems like this component builder-text is loaded when I have a Builder Section. I have two on my page and get two errors.
On both of those section, i have the RenderContent component loaded but with a v-show=“false” in order to disallow editors to drag and drop content.

2

Hi @marinelbg, Welcome to Builder.io Forum!

Could you please confirm which version of @builder.io/sdk-vue you’re using?

3

I’m using the vue-3 sdk

4

@marinelbg , thanks for confirming it. I tried and was not able to reproduce the issue with my setup. Would be great if you could provide us with detailed steps and your integration code for further investigation!

5

Hi,

I have a page with the component RenderContent, used like so :

<RenderContent
   class="render-content"
   model="article"
   :content="content"
   :apikey="apiKey"
   :customComponents="getCustomComponents"
/>

And get this issue anytime i drag and drop any of the Basic builder components in the zone (Text, image, etc)

6

Hi @marinelbg,

Appreciate your patience!

I have set Vue3 in my local following this doc Integrating Pages - Builder.io and having component RenderContent but again not able to reproduce the issue. Could you please share a minimal GitHub repo/zip file so we can reproduce the issue for the fix? Also, if you’re not running on localhost, please share the builder content entry link so we can see this issue directly in the console!

7

I’m getting the same thing. By using a basic text block, and basic image block.

I got it using the sample code from here:

8

Hey Garima.

I made a minimal github repo that reproduces the issue.
You can see on the main page that there is a warning for each builder-generated component. (On top of many other warning that I think also stem from builder).

GitHub repo

9

Thank you @marinelbg for sharing this. Looking into the setup and get back to you asap!