0

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?

0 Answers0