# Problem referencing HTML Serializer with gatsby-source-prismic plugin

**URL:** <https://community.prismic.io/t/problem-referencing-html-serializer-with-gatsby-source-prismic-plugin/3692>\
**Category:** Developing with Prismic\
**Created:** [January 22, 2021, 10:41pm UTC](https://community.prismic.io/t/problem-referencing-html-serializer-with-gatsby-source-prismic-plugin/3692 "2021-01-22T22:41:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![maddy](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@maddy](https://community.prismic.io/u/maddy)\
**Post date:** [January 22, 2021, 10:41pm UTC](https://community.prismic.io/t/problem-referencing-html-serializer-with-gatsby-source-prismic-plugin/3692/1 "2021-01-22T22:41:27Z")

</div>

I am working through swapping out the old gatsby-source-prismic-graphql plugin with the new gatsby-source-prismic plugin and keep running into issues with the htmlSerializer. It was created in its own file and I am trying to reference it in the gatsby config in the plugin configuration and I keep running into an error that states 'cannot use import statement outside of module' and is pointing to the react import inside the htmlSerializer. Is there a different way to reference the htmlSerializer in the config for the new plugin?

---

<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:** [January 25, 2021, 4:15pm UTC](https://community.prismic.io/t/problem-referencing-html-serializer-with-gatsby-source-prismic-plugin/3692/3 "2021-01-25T16:15:47Z")

</div>

Hello Madeline,

Thanks for reaching out to us.

You need to reference htmlSerializer in the `options` of the `gatsby.config.js` file like this:

```
options {
  htmlSerializer: ({ node, key, value }) => (type, element, content, children) => 
  htmlSerializer(type, element, content, children)
}

```

And [here](https://github.com/angeloashmore/gatsby-source-prismic#how-to-use) is the link to the documentation, where you will find the information.

Let me know after giving this a try.

Priyanka

---

<div class="post-metadata">

**Author:** ![maddy](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@maddy](https://community.prismic.io/u/maddy)\
**Post date:** [February 2, 2021, 7:25pm UTC](https://community.prismic.io/t/problem-referencing-html-serializer-with-gatsby-source-prismic-plugin/3692/4 "2021-02-02T19:25:14Z")

</div>

Hi Priyanka,

I've tried to reference the htmlSerializer just like the example you provided and I get the same error, 'Cannot use import statement outside a module'. None of the examples I have come across use require inside the htmlSerializer in place of import within the htmlSerializer itself, which is what it is asking me to do as a fix. Despite that, I have tried doing so as well and I get a whole new batch of errors in regards to the Anchor component being used inside the htmlSerializer.

I added the config for the htmlSerializer as in your example and here is the htmlSerializer I am using:

```
import React from 'react';
import { Link as PrismicLink } from 'prismic-reactjs';
import { Link } from 'gatsby';
import { Anchor, Heading, ResponsiveContext, Text } from '../ui';
import { linkResolver } from './linkResolver';

function serializeHyperlink(element, content) {
  let url;
  if (element.data.link_type === 'Web') url = element.data.url;
  else if (element.data.link_type === 'Document')
    url = PrismicLink.url(element.data, linkResolver).replace('https://', '/');
  else url = '/';

  let result = '';

  if (element.data.link_type === 'Document' || url.startsWith('/')) {
    result = (
      <Anchor as={Link} to={url} key={`anchor-doc-${Math.random()}`}>
        {content}
      </Anchor>
    );
  } else {
    const target = element.data.target ? { target: element.data.target, rel: 'noopener' } : {};

    result = (
      <Anchor href={url} {...target} key={`anchor-${Math.random()}`}>
        {content}
      </Anchor>
    );
  }

  return result;
}

function serializeImage(element) {
  const wrapperClassList = [element.label || '', 'block-img'];

  let result = (
    <img src={element.url} alt={element.alt || ''} copyright={element.copyright || ''} />
  );

  if (element.linkTo) {
    const url = PrismicLink.url(element.linkTo, linkResolver);

    if (element.linkTo.link_type === 'Document') {
      result = (
        <Anchor as={Link} to={url} key={`image-doc-${Math.random()}`}>
          {result}
        </Anchor>
      );
    } else {
      const target = element.linkTo.target
        ? { target: element.linkTo.target, rel: 'noopener' }
        : {};

      result = (
        <Anchor href={url} {...target} key={`image-${Math.random()}`}>
          {result}
        </Anchor>
      );
    }
  }

  result = (
    <Text className={wrapperClassList.join(' ')} key={`text-${Math.random()}`}>
      {result}
    </Text>
  );

  return result;
}

export default function(type, element, content, children) {
  switch (type) {
    case 'heading1':
      return (
        <ResponsiveContext.Consumer key={`heading1-${Math.random()}`}>
          {(size) => {
            return (
              <Heading level="1" size={size}>
                {children}
              </Heading>
            );
          }}
        </ResponsiveContext.Consumer>
      );

    case 'heading2':
      return (
        <ResponsiveContext.Consumer key={`heading2-${Math.random()}`}>
          {(size) => {
            return (
              <Heading level="2" size={size}>
                {children}
              </Heading>
            );
          }}
        </ResponsiveContext.Consumer>
      );

    case 'heading3':
      return (
        <ResponsiveContext.Consumer key={`heading3-${Math.random()}`}>
          {(size) => {
            return (
              <Heading level="3" size={size}>
                {children}
              </Heading>
            );
          }}
        </ResponsiveContext.Consumer>
      );

    case 'heading4':
      return (
        <ResponsiveContext.Consumer key={`heading4-${Math.random()}`}>
          {(size) => {
            return (
              <Heading level="4" size={size}>
                {children}
              </Heading>
            );
          }}
        </ResponsiveContext.Consumer>
      );

    case 'heading5':
      return (
        <ResponsiveContext.Consumer key={`heading5-${Math.random()}`}>
          {(size) => {
            return (
              <Heading level="5" size={size}>
                {children}
              </Heading>
            );
          }}
        </ResponsiveContext.Consumer>
      );

    case 'heading6':
      return (
        <ResponsiveContext.Consumer key={`heading6-${Math.random()}`}>
          {(size) => {
            return (
              <Heading level="6" size={size}>
                {children}
              </Heading>
            );
          }}
        </ResponsiveContext.Consumer>
      );

    case 'paragraph':
      return (
        <ResponsiveContext.Consumer key={`paragraph-${Math.random()}`}>
          {(size) => {
            return (
              <Text as="p" size={size}>
                {children}
              </Text>
            );
          }}
        </ResponsiveContext.Consumer>
      );

    case 'hyperlink':
      return serializeHyperlink(element, content);

    case 'image':
      return serializeImage(element);

    default:
      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:** [March 3, 2021, 1:32pm UTC](https://community.prismic.io/t/problem-referencing-html-serializer-with-gatsby-source-prismic-plugin/3692/8 "2021-03-03T13:32:45Z")

</div>

Hello @maddy,

I apologize for the long delay. Are you still having an issue with it?

I can think of a few issues.

The first is that by default, gatsby-config is written in commonjs, and is not converted.  
You could use the HTML serializer in their templates, as a parameter of the RichText component.

It would be better if you can share your GitHub repo?

Looking forward to hearing from you back.

Priyanka

---

<div class="post-metadata">

**Author:** ![maddy](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@maddy](https://community.prismic.io/u/maddy)\
**Post date:** [March 10, 2021, 7:37pm UTC](https://community.prismic.io/t/problem-referencing-html-serializer-with-gatsby-source-prismic-plugin/3692/9 "2021-03-10T19:37:35Z")

</div>

Sorry it took so long for me to get back to you. I was still having an issue so I just stopped trying to use it inside the gatsby-config. Instead, it is just being referenced in the files it is required and that seems to work just fine.

---

<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:** [March 15, 2021, 10:29am UTC](https://community.prismic.io/t/problem-referencing-html-serializer-with-gatsby-source-prismic-plugin/3692/10 "2021-03-15T10:29:34Z")

</div>

Hello @maddy

That's totally fine. I'm glad that it's working for you. Don't hesitate to reach out to us if you have any doubts or questions.

Thanks,

Priyanka

---

<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:** [March 16, 2021, 10:30am UTC](https://community.prismic.io/t/problem-referencing-html-serializer-with-gatsby-source-prismic-plugin/3692/11 "2021-03-16T10:30:15Z")

</div>

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, 4:26pm UTC](https://community.prismic.io/t/problem-referencing-html-serializer-with-gatsby-source-prismic-plugin/3692/12 "2021-12-09T16:26:52Z")

</div>