Problem referencing HTML Serializer with gatsby-source-prismic plugin

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?

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 is the link to the documentation, where you will find the information.

Let me know after giving this a try.

Priyanka

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;
  }
}

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