Vue warning for links with prismiclink

jankohlbach · December 17, 2024, 11:37am

Describe your question/issue in detail

I have a ton of warnings in the console for using links, maybe something you could look into, because it really clutters the console and other important stuff gets overlooked.

Errors

[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance. 
  at <NuxtLink to="/journal" target=null rel=null > 
  at <PrismicLink field= {id: 'ZzSSYxAAACcA4KYs', type: 'generic', tags: Array(0), lang: 'en-us', slug: 'get-inspired', …} > 
  at <Footer key=0 > 
  at <Default ref=Ref< undefined > > 
  at <AsyncComponentWrapper ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=4 > 
  at <NuxtRoot>

Package.json file

  "devDependencies": {
    "@nuxt/eslint": "^0.7.3",
    "@nuxtjs/prismic": "^3.4.6",
    "@nuxtjs/robots": "^5.0.1",
    "@nuxtjs/sitemap": "^7.0.0",
    "@slicemachine/adapter-nuxt": "^0.3.60",
    "@tweakpane/core": "^2.0.5",
    "@types/three": "^0.170.0",
    "eslint": "^9.17.0",
    "nuxt": "^3.14.1592",
    "sass": "^1.83.0",
    "slice-machine-ui": "^2.11.0",
    "tweakpane": "^4.0.5",
    "typescript": "5.6.3",
    "vite-plugin-glsl": "^1.3.1",
    "vue-tsc": "^2.1.10"
  },
  "dependencies": {
    "gsap": "^3.12.5",
    "lenis": "^1.1.18",
    "split-type": "^0.3.4",
    "three": "^0.171.0"
  },

Steps to reproduce

just used the normal prismic link field

Phil · December 18, 2024, 9:37am

The warning you’re seeing typically happens when the default slot is not being used correctly in Vue. This can be caused by the way you’re using PrismicLink or NuxtLink components. Here’s a breakdown of potential issues and fixes:

Issue Breakdown

Non-Function Default Slot:

• Vue 3 prefers function-based slots for better performance and flexibility. This warning occurs if a slot is passed as plain content instead of a function.

• The PrismicLink component may be passing its slot incorrectly, or you might be using it in a way that doesn’t align with Vue 3’s expectations.

Warnings in NuxtLink:

• If you’re using the target or rel attributes incorrectly or passing null values, it might trigger warnings.

Prismic Link Handling:

• The PrismicLink component should handle links correctly, but issues may arise if you’re passing incomplete or unexpected data into the field prop.

Fixes

Refactor PrismicLink Usage:

• Ensure you’re passing a valid field and using the default slot as a function.

Example:

<PrismicLink :field="linkField">
  <template #default="{ href, target }">
    <a :href="href" :target="target">
      {{ linkText }}
    </a>
  </template>
</PrismicLink>

• Validate the linkField data to confirm it includes url, target, etc.

Update target and rel Attributes:

• Avoid passing null values. Replace null with valid values or omit them.

Example:

<NuxtLink
  :to="link"
  :target="target || '_self'"
  :rel="target === '_blank' ? 'noopener noreferrer' : null"
>
  {{ linkText }}
</NuxtLink>

Check PrismicLink Prop Handling:

• If you’re using the default @nuxtjs/prismic setup, make sure you’re passing a valid Prismic field:

<PrismicLink :field="{ link_type: 'Web', url: 'https://example.com' }">
  Click me
</PrismicLink>

Upgrade or Patch Dependencies:

• Ensure you’re using compatible versions of @nuxtjs/prismic and nuxt. Your dependencies seem recent, but try upgrading if updates are available.

• Check the release notes for @nuxtjs/prismic for any breaking changes.

Turn Off Warnings in Development:

• Temporarily suppress warnings in development if they clutter the console.

Add the following to your Nuxt config:

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      warnHandler: (msg, vm, trace) => {
        if (msg.includes('Non-function value encountered for default slot')) {
          return; // Ignore specific warnings
        }
      },
    },
  },
});

Inspect Footer and Other Components:

• Check if components like or are contributing to the warning due to how they’re using the PrismicLink or NuxtLink.

Recommended Debugging Steps

• Log the linkField object in PrismicLink to confirm the structure matches what the component expects.

• Test the link with minimal attributes to narrow down the issue:

<PrismicLink :field="{ link_type: 'Web', url: 'https://example.com' }">
  Test Link
</PrismicLink>

• If you’re using a custom implementation, review it against Prismic’s official documentation for Nuxt.

Let me know if you’d like me to dig deeper into any of these!

jankohlbach · December 18, 2024, 10:04am

please, for the future, mark AI-generated content as AI-generated, thanks - a human

now to the issue:
I'm using the PrismicLink just as intended:

<PrismicLink :field="item.link"/>

and the field has correct content

{link_type: 'Web', key: 'ad8a212f-4faa-42d0-80dc-6a8495205000', url: 'https://awwwards.com/jankohlbach', target: '_blank', text: 'Awwwards'}

so yes, I do think the problem is in how PrismicLink internally is working and I politely ask you to look into it :)

Phil · December 20, 2024, 9:35am

Beep Boop Sorry

Phil · December 20, 2024, 9:38am

Our lovely developer @lihbr, who and builds creates the Nuxt kit, is currently on holiday. So if you drop this into the issues for the package on Github hopefully she can get to it when she gets back:

lihbr · January 2, 2025, 5:47pm

Hi @jankohlbach, sorry for the trouble with the above and thank you for reporting this!

I just released patches for @prismicio/vue with v4.3.1 and @nuxtjs/prismic with v3.4.7. Updating @nuxtjs/prismic should be enough in your case to get the upstream patch.

Please let us know if you still encounter the issue after, happy to help further!
Lucie

Mathis · January 9, 2025, 12:11pm

Hello everyone,

I’m joining this thread because I believe I’m facing a similar issue. When using PrismicLink in some slices, my terminal shows the following error:

[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

Even though I’m using the component correctly, I haven’t been able to fix these warnings, which clutter the terminal significantly. Unfortunately, updating @nuxtjs/prismic to the latest version (3.4.8) doesn’t seem to resolve the problem @lihbr.

I'm using my slice this way:

<template>
  <ComponentA :slice="slice" v-if="slice.variation === 'default'" />
  <ComponentB :slice="slice" v-else-if="slice.variation === 'single'" />
  <ComponentC :slice="slice" v-else-if="slice.variation === 'updates'" />
</template>

<script setup>
  const { slice } = defineProps(getSliceComponentProps(["slice", "index", "slices", "context"]))
</script>

Then in one of the components, I'm simply using <PrismicLink /> where I need to, like so:

<ul>
  <li v-for="(item, i) in slice.items" :key="i">
    <PrismicLink :field="item.link">
      <PrismicRichText :field="item.label" />
    </PrismicLink>
  </li>
</ul>

Thank you for your help!

Mathis

Phil · January 10, 2025, 11:19am

Hi @Mathis ,

What version of @prismicio/vue are you using? You'll need v4.3.1

Mathis · January 10, 2025, 1:51pm

Hello @Phil ,

Thanks for the reply. I'm indeed using the v4.3.1 with @prismicio/vue, it is a dependency from @nuxtjs/prismic v3.4.8.

Let me know if I can provide more information that could help

Phil · January 13, 2025, 11:03am

Have you tried deleting your node_modules and package-lock.json and reinstalling?

lihbr · January 13, 2025, 11:51am

Hi @Mathis,

I tried reproducing your issue with the latest versions of our SDKs with no luck. Here's the setup I used:

<script setup lang="ts">
import { type Content } from '@prismicio/client'

defineProps(getSliceComponentProps<Content.RichTextSlice>(
  ['slice', 'index', 'slices', 'context']
));

// Mocked for ease of reproduction
const items = ref<Content.RichTextSlice["primary"]["items"]>([
  {
    label: [
      {
        type: 'heading1',
        text: 'First item',
        spans: [],
      }
    ],
    link: {
      link_type: 'Web',
      url: 'https://prismic.io',
    },
  },
  {
    label: [
      {
        type: 'heading1',
        text: 'Second item',
        spans: [],
      }
    ],
    link: {
      link_type: 'Document',
      id: 'Xp3f4REAACIAu1Qv',
      type: 'page',
      tags: [],
      slug: 'about',
      lang: 'en-us',
      uid: 'foo',
      url: '/foo',
    },
  }
])
</script>

<template>
  <section>
    <PrismicRichText
      :field="slice.primary.content"
      class="richtext"
    />
    <ul>
    <li v-for="(item, i) in items" :key="i">
      <PrismicLink :field="item.link">
        <PrismicRichText :field="item.label" />
      </PrismicLink>
    </li>
  </ul>
  </section>
</template>

In case what @Phil suggested doesn't work for you, can you try sharing a sample of the data you're trying to render? (logged slice's json)

Topic		Replies	Views
[Vue Router warn] - When routing to external page w/ PrismicLink component Developing with Prismic vuejs	4	75	August 9, 2024
Encountered an issue with slice machine tutorial Developing with Prismic slice-machine	1	348	February 9, 2022
Using a simple link to another page in my site Developing with Prismic nuxtjs	3	871	December 9, 2021
Link property "Allow target blank" is not displayed Developing with Prismic nuxtjs , slice-machine	2	5	January 9, 2025
Duplicate Routes warning with 'prismic-preview' using Prismic's Nuxt Module Developing with Prismic nuxtjs	5	664	May 25, 2022

Vue warning for links with prismiclink

Describe your question/issue in detail

Errors

Package.json file

Steps to reproduce

Related topics