Nuxt•7mo ago

Cannot use <slot> inside component

I get infinite warn like this:

Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead

Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead

when I create on new nuxt, nuxt-content, nuxt-icon: Section.vue:

<template>
<div>
<ContentSlot name="title" />
<div>
<slot/>
</div>
</div>
</template>

<template>
<div>
<ContentSlot name="title" />
<div>
<slot/>
</div>
</div>
</template>

Container.vue:

<template>
<div>
<slot />
</div>
</template>

<template>
<div>
<slot />
</div>
</template>

index.md:

::section
#title
My title
#default
::::container
Test
::::
::

::section
#title
My title
#default
::::container
Test
::::
::

3 Replies

FoxCodeOP•7mo ago

Problem is related to /runtime-core.esm-bundler

if (!!(process.env.NODE_ENV !== "production") && true) {
  PublicInstanceProxyHandlers.ownKeys = (target) => {
    // warn$1(
    //   `Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.`
    // );
    // return Reflect.ownKeys(target);
    return false
  };
}

if (!!(process.env.NODE_ENV !== "production") && true) {
  PublicInstanceProxyHandlers.ownKeys = (target) => {
    // warn$1(
    //   `Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.`
    // );
    // return Reflect.ownKeys(target);
    return false
  };
}

commenting this code makes the application work properly

joe_black_unlucky•7mo ago

https://tenor.com/Y9bH.gif

Tenor

water leaking fix with flex tape

FoxCodeOP•7mo ago

update: its nuxt-icon module fault, new version fixes it but nuxt-ui doesn't have it yet

Gaming

Programming

Cannot use <slot> inside component