# Using linkResolver in Rich Text

**URL:** <https://community.prismic.io/t/using-linkresolver-in-rich-text/6868>\
**Category:** Developing with Prismic\
**Tags:** gatsby\
**Created:** [September 3, 2021, 10:14pm UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868 "2021-09-03T22:14:10Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![hon.boey](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/hon.boey/32/2835_2.png) [@hon.boey](https://community.prismic.io/u/hon.boey)\
**Post date:** [September 3, 2021, 10:14pm UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/1 "2021-09-03T22:14:10Z")

</div>

Hi,

I am having troubles understanding and implementing linkResolver.

I have two single Custom Types: Homepage and About.

 ![Screen Shot 2021-09-04 at 07.59.08](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/d/d56edf3ee77472a036ab331b9e60d3c932fbd7e2.png)

The About page has a UID of about

 ![Screen Shot 2021-09-04 at 08.03.03](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/b/b5510b85eda2552174b2e9cc1a47e08b6d87a42d.png)

I am trying to create a link within a Rich Text field from the Homepage to the About page.

 ![Screen Shot 2021-09-04 at 08.01.35](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/9/946775292af6c0d5c114975c9808cddb3db871ad.png)

The query to the link looks like this:

 ![Screen Shot 2021-09-04 at 08.07.39](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/c/c9388e6696f0fc994ce991948080a06ae5589c27.png)

On the Homepage, my code is the following:

```auto
<RichText htmlSerializer={htmlSerializer} serializeHyperlink={CustomLink} render={doc.lede.raw} />

```

This is the code in the CustomLink component:

```auto
import React from 'react'
import { Link } from 'gatsby'
import { linkResolver } from './LinkResolver'

export const CustomLink = (type, element, content, children, index) => {
  if (element.data.link_type === 'Document') {
    <Link to={linkResolver(element.data)} key={element.data.id}>
      {content}
    </Link>
  }

  if (element.data.link_type === 'Web') {
    <a id={element.data.id} href={element.data.url}>
      {content}
    </a>
  }
  return null
}

```

And this is the code in the linkResolver component

```auto
exports.linkResolver = (doc) => {
  if (doc.type === 'about') {
    return `/${doc.uid}`
  }

  return '/'
}

```

Unfortunately I am unable to get the link to route to the About page. Could I please get some advice on this?

Thank you!

---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [September 7, 2021, 8:21am UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/5 "2021-09-07T08:21:08Z")

</div>

Hello @hon.boey

Welcome to the Prismic community.

I assume you save the response from a query in a variable called `doc. In that case, the Rich Text render method should be:

`<RichText render={doc.data.lede.raw} />`

As explained in this [article](https://prismic.io/docs/technologies/link-resolver-gatsby#2.-add-it-to-the-plugin), have you registered link resolver to the plugin?

Let me know if it still doesn't solve your issue. I'd be happy to dig it more.

Thanks,  
Priyanka

---

<div class="post-metadata">

**Author:** ![hon.boey](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/hon.boey/32/2835_2.png) [@hon.boey](https://community.prismic.io/u/hon.boey)\
**Post date:** [September 7, 2021, 10:51am UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/6 "2021-09-07T10:51:29Z")

</div>

Hi Priyanka,

Thanks for getting back to me.

The variable `doc` is defined as `data.prismicHomepage.data`. The RichText function is rendering my text so I know that the `doc.lede.raw` query in the follwing is correct:

```auto
<RichText htmlSerializer={htmlSerializer} serializeHyperlink={CustomLink} render={doc.lede.raw} />

```

Also, I have registered the linkResolver to the plugin as shown below:

```auto
{
      resolve: `gatsby-source-prismic`,
      options: {
        repositoryName: `titirangimedicalcentre`,
        accessToken: `${process.env.API_KEY}`,
        linkResolver: require('./src/utilities/linkResolver').linkResolver,
        schemas: {
          homepage: require("./custom_types/homepage.json"),
          about: require("./custom_types/about.json"),
        },
      },
    },

```

I am however, receiving the follow warning:

```auto
warn ./src/pages/index.js
Attempted import error: '../utilities/CustomLink' does not contain a default
export (imported as 'CustomLink').

```

Would this be the issue? Do I need to add `export default CustomLink` to the CustomLink component? The current CustomLink component looks like this:

```auto
import React from 'react'
import { Link } from 'gatsby'
import { linkResolver } from './linkResolver'

export const CustomLink = (type, element, content, children, index) => {
  if (element.data.link_type === 'Document') {
    <Link to={linkResolver(element.data)} key={element.data.id}>
      {content}
    </Link>
  }

  if (element.data.link_type === 'Web') {
    <a id={element.data.id} href={element.data.url}>
      {content}
    </a>
  }
  return null
}

```

---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [September 7, 2021, 11:57am UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/7 "2021-09-07T11:57:24Z")

</div>

How are you importing customLink in your file where you are rendering the Rich Text? Can you paste that code here?

---

<div class="post-metadata">

**Author:** ![hon.boey](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/hon.boey/32/2835_2.png) [@hon.boey](https://community.prismic.io/u/hon.boey)\
**Post date:** [September 7, 2021, 12:14pm UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/8 "2021-09-07T12:14:24Z")

</div>

Hi Priyanka,

The specific code for importing the CustomLink is:  
`import CustomLink from "../utilities/CustomLink"`

And here is the context that the CustomLink and RichText components are in:

```auto
import * as React from "react"
import { GatsbyImage } from "gatsby-plugin-image"
import { graphql } from "gatsby"
import Layout from "../components/Layout"
import { RichText } from 'prismic-reactjs'
import htmlSerializer from "../utilities/htmlSerializer"
import CustomLink from "../utilities/CustomLink"

function IndexPage({ data }) {
  const doc = data.prismicHomepage.data

  return (
    <Layout title="">
      <div className="wrapper max-w-screen-xl mx-auto p-4 lg:p-8">

        <section className="border-r border-l border-black pl-1/24 pr-1/24 mb-8">
          <div className="py-8 lg:flex">
            <p className="font-display text-4xl md:text-6xl leading-snug md:leading-normal lg:w-8/12 lg:border-r lg:border-black lg:pr-1/24 mb-8">{doc.headline.text}</p>
            <div className="lg:w-4/12 lg:px-1/24 lg:pt-8">
              <RichText htmlSerializer={htmlSerializer} serializeHyperlink={CustomLink} render={doc.lede.raw} />
            </div>
          </div>
        </section>
        //...
    </Layout>
    )
  }

export default IndexPage

```

---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [September 7, 2021, 12:57pm UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/9 "2021-09-07T12:57:44Z")

</div>

in your code import should be:

```auto
export const CustomLink = () => {}

```

```auto
import {CustomLink} from '.../utilities/CustomLink' 

```

Find more details in this documentation:

- [Export and Import](https://javascript.info/import-export)
- [export - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export)

I hope it solves your issue.

Thanks,  
Priyanka

---

<div class="post-metadata">

**Author:** ![hon.boey](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/hon.boey/32/2835_2.png) [@hon.boey](https://community.prismic.io/u/hon.boey)\
**Post date:** [September 7, 2021, 9:02pm UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/10 "2021-09-07T21:02:45Z")

</div>

Thanks Priyanka

Can I get some clarification on the following code:

> [@Priyanka](#):
>
> ```auto
> export const CustomLink = () => {}
> 
> ```

I assume that this is the format my CustomLink component should follow. Is that correct? At the moment my CustomLink looks like this:

```auto
// CustomLink.js file

import React from 'react'
import { Link } from 'gatsby'
import { linkResolver } from './linkResolver'

export const CustomLink = (type, element, content, children, index) => {
  if (element.data.link_type === 'Document') {
    <Link to={linkResolver(element.data)} key={element.data.id}>
      {content}
    </Link>
  }

  if (element.data.link_type === 'Web') {
    <a id={element.data.id} href={element.data.url}>
      {content}
    </a>
  }
  return null
}

```

I have also updated the import to look like this:

```auto
import * as React from "react"
import { GatsbyImage } from "gatsby-plugin-image"
import { graphql } from "gatsby"
import Layout from "../components/Layout"
import { RichText } from 'prismic-reactjs'
import htmlSerializer from "../utilities/htmlSerializer"
import { CustomLink } from "../utilities/CustomLink"

function IndexPage({ data }) {
  const doc = data.prismicHomepage.data

  return (
    <Layout title="">
      <div className="wrapper max-w-screen-xl mx-auto p-4 lg:p-8">

        <section className="border-r border-l border-black pl-1/24 pr-1/24 mb-8">
          <div className="py-8 lg:flex">
            <p className="font-display text-4xl md:text-6xl leading-snug md:leading-normal lg:w-8/12 lg:border-r lg:border-black lg:pr-1/24 mb-8">{doc.headline.text}</p>
            <div className="lg:w-4/12 lg:px-1/24 lg:pt-8">
              <RichText htmlSerializer={htmlSerializer} serializeHyperlink={CustomLink} render={doc.lede.raw} />
            </div>
          </div>
        </section>
        //....
      )
  }

```

Unfortunately I am still getting the following error:

```auto
warn ./src/pages/about.js
Attempted import error: '../utilities/CustomLink' does not contain a default
export (imported as 'CustomLink').

```

As further reference, this is the code in my linkResolver component:

```auto
// linkResolver.js file

exports.linkResolver = (doc) => {
  if (doc.type === 'about') {
    return `/${doc.uid}`
  }

  return '/'
}

```

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [September 8, 2021, 9:07pm UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/13 "2021-09-08T21:07:18Z")

</div>

Hey @hon.boey, thanks for sharing all of these details with us. Are you still having this issue?

Your setup seems to be just fine, and importing the helper like that `import { CustomLink } from "../utilities/CustomLink"` should have made the error go away. Could you inspect the `<a>` element that renders in your site and check if the href is being added or not?

---

<div class="post-metadata">

**Author:** ![hon.boey](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/hon.boey/32/2835_2.png) [@hon.boey](https://community.prismic.io/u/hon.boey)\
**Post date:** [September 9, 2021, 3:22am UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/14 "2021-09-09T03:22:04Z")

</div>

Hi @Pau and @Priyanka,

Thank you both for jumping on to this problem for me. After a bit more playing around and with your advice I seemed to have resolved the problem. The issue stemmed from a conflict between the `htmlSerializer` and the `CustomLink` components.

I have now deleted the `CustomLink` component and imported the `linkResolver` function into `htmlSerializer`. `htmlSerializer` now looks like this:

```auto
import * as React from 'react'
import { Link } from 'gatsby'
import { Elements } from 'prismic-richtext'
import { Link as PrismicLink } from 'prismic-reactjs'
import { linkResolver } from './linkResolver'

// -- HTML Serializer
const htmlSerializer = function (type, element, content, children, key) {
  switch (type) {

    case Elements.paragraph: // Paragraph
      return <p key={key} className="mb-4">{children}</p>

    //...

    case Elements.hyperlink: // Hyperlinks
      const url = PrismicLink.url(element.data, linkResolver)

      if (element.data.link_type === 'Document') {
        return (
          <Link key={key} to={url}>
            {content}
          </Link>
        )
      }

      return (
        <a
          key={key}
          href={url}
          target={element.data.target}
          rel={element.data.target ? 'noopener' : undefined}
          className="link-class"
        >
          {children}
        </a>
      )

    default:
      // Always include a default that returns null
      return null
  }
}

export default htmlSerializer

```

Thanks again for your help both of you!

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [September 10, 2021, 3:22am UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/15 "2021-09-10T03:22:30Z")

</div>

closed on September 10, 2021, 3:22am UTC as resolved,  flag & select 'Something Else' to reopen.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 3:26pm UTC](https://community.prismic.io/t/using-linkresolver-in-rich-text/6868/16 "2021-12-09T15:26:51Z")

</div>

Opened on December 9, 2021, 3:26pm UTC