htmlSerializer doesn't seem to do anything

I have used the docs to create an htmlSerializer, but even when I hard-code content, it doesn't appear to change the output at all. Is there a step I'm missing? If I misspell the link to htmlSerializer in my Slice, it throws an error, so I know it's resolving the correct path.

What I'm working with currently (for testing):

import React from 'react';

import { RichText, Elements } from 'prismic-reactjs';

import ReactPlayer from 'react-player/lazy'

// -- Function to add unique key to props

const propsWithUniqueKey = function(props, key) {

  return Object.assign(props || {}, { key });

};

// -- HTML Serializer

const prismicSerializer = function(type, element, content, children, key) {

  var props = {};

  switch(type) {

      

    case Elements.heading1: // Heading 1

      return React.createElement('h1', propsWithUniqueKey(props, key), children);

      

    case Elements.heading2: // Heading 2

      return React.createElement('h2', propsWithUniqueKey(props, key), children);

      

    case Elements.heading3: // Heading 3

      return React.createElement('h3', propsWithUniqueKey(props, key), children);

      

    case Elements.heading4: // Heading 4

      return React.createElement('h4', propsWithUniqueKey(props, key), children);

      

    case Elements.heading5: // Heading 5

      return React.createElement('h5', propsWithUniqueKey(props, key), children);

      

    case Elements.heading6: // Heading 6

      return React.createElement('h6', propsWithUniqueKey(props, key), children);

      

    case Elements.paragraph: // Paragraph

      return <Typography variant="h3">{children}</Typography>

      

    case Elements.preformatted: // Preformatted

      return React.createElement('pre', propsWithUniqueKey(props, key), children);

      

    case Elements.strong: // Strong

      return React.createElement('strong', propsWithUniqueKey(props, key), children);

      

    case Elements.em: // Emphasis

      return React.createElement('em', propsWithUniqueKey(props, key), children);

      

    case Elements.listItem: // Unordered List Item

      return React.createElement('li', propsWithUniqueKey(props, key), children);

      

    case Elements.oListItem: // Ordered List Item

      return React.createElement('li', propsWithUniqueKey(props, key), children);

      

    case Elements.list: // Unordered List

      return React.createElement('ul', propsWithUniqueKey(props, key), children);

      

    case Elements.oList: // Ordered List

      return React.createElement('ol', propsWithUniqueKey(props, key), children);

      

    case Elements.image: // Image

      const linkUrl = element.linkTo ? element.linkTo.url || linkResolver(element.linkTo) : null;

      const linkTarget = (element.linkTo && element.linkTo.target) ? { target: element.linkTo.target } : {};

      const linkRel = linkTarget.target ? { rel: 'noopener' } : {};

      const img = React.createElement('img', { src: element.url , alt: element.alt || '' });

      return React.createElement(

        'p',

        propsWithUniqueKey({ className: [element.label || '', 'block-img'].join(' ') }, key),

        linkUrl ? React.createElement('a', Object.assign({ href: linkUrl }, linkTarget, linkRel), img) : img

      );

      

    case Elements.embed: // Embed

      return <ReactPlayer url="https://www.youtube.com/watch?v=9ulOEpbdF-o" />

      

    case Elements.hyperlink: // Image

      const targetAttr = element.data.target ? { target: element.data.target } : {};

      const relAttr = element.data.target ? { rel: 'noopener' } : {};

      props = Object.assign({ 

        href: element.data.url || linkResolver(element.data)

      }, targetAttr, relAttr);

      return React.createElement('a', propsWithUniqueKey(props, key), children);

      

    case Elements.label: // Label

      props = element.data ? Object.assign({}, { className: element.data.label }) : {};

      return React.createElement('span', propsWithUniqueKey(props, key), children);

      

    case Elements.span: // Span

      if (content) {

        return content.split("\n").reduce((acc, p) => {

          if (acc.length === 0) {

            return [p];

          } else {

            const brIndex = (acc.length + 1)/2 - 1;

            const br = React.createElement('br', propsWithUniqueKey({}, brIndex));

            return acc.concat([br, p]);

          }

        }, []);

      } else {

        return null;

      }

    default: // Always include a default that returns null

      return null;

  }

};

My slice:

const WideText = ({ slice }) => {

  const styles = theme()

  return(

    <Grid container component="section">

      <RichText render={slice.primary.text} htmlSerializer={prismicSerializer} />

    </Grid>

)}

export default WideText;

Hi Mark,

Thanks for reaching out.

In fact, it depends on the content that you have in the "slice.primary.text" that you are passing.

One way to figure out the issue is to add a log in the serializer function to see if it enters to this function and what is type of element you are passing.

And it will be also helpful to share with us your repository name (in a private message if necessary).

Looking forward to your reply,
Fares

I've tested with text components.

Yes I understand, have you tried to add logs? and still need to have your repository name to debug this issue.

Edit-elements

I've tried logging to no avail.