I am trying to build an API that would convert Notion's JSON page structure into HTML syntax. My goal is to make a request in the form of api.com/pageID
and recieve <h1>Title</h1><p>Text</p>...
.
I figured it would be best to use React for this. I am deploying through Vercel. Everything is working fine in the dev environment, but when I push it to production, I get SyntaxError: Unexpected token '<'
everywhere the JSX elements are used.
I used pieces of this project and I am trying to make it an API that's running on Vercel. The code runs in a folder api/[pageId].js
and I am using vercel dev
to run it locally
This is s simplified form of the JSON I am trying to convert to HTML
[
{
id: 1,
type: "heading_1",
heading_1: {
color: "red",
text: {
text: "Hello!",
annotations: { bold: true, italic: false },
},
},
},
{
id: 2,
type: "paragraph",
paragraph: {
color: "default",
text: {
text: "Hello world!",
annotations: { bold: false, italic: false },
},
},
},
]
I then cycle through the blocks jsonBlocks.map((block) => renderBlock(block));
This is how I process the blocks, and here I get the errors (in the production version only!)
const renderBlock = (block) => {
const { type, id } = block;
const value = block[type];
switch (type) {
case "paragraph":
return (
<p> // SyntaxError here
<Text text={value.text} /> // SyntaxError here
</p> // SyntaxError here
);
case "heading_1":
return (
<h1> // SyntaxError here
<Text text={value.text} /> // ...
</h1> // ...
);
default:
return "❌ Unsupported block";
}
};
The only solution I figured out was to replace everything with strings. E. g. <p>${value.text}</p>
, but I think this is very inefficient and got complicated really fast (since there are styles in form of objects etc.)
How do I approach this, please? What am I missing?