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
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.
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
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.