Investigate server-util package usage for Next.js SSR and other environments

[YousefED]

@blocknote/server-util has been designed / tested for usage in node.js based environments.

However, some users want to use it in Next.js server side actions or Partykit functions (see #451). These functions probably run in different environments, so we'll need to investigate compatibility with this

[leo-paz]

hey @YousefED sorry to bug but any updates on this?

still getting the error in my server action or /api/route.ts:

createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
And it doesn't change if it's in an api route vs a server action

[linhtrinh18]

@YousefED Same here, using nextjs 14 and the error pops up:

Server Error
Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

This error happened while generating the page. Any console logs will be displayed in the terminal window.

import { ServerBlockNoteEditor } from "@blocknote/server-util";

export const Introduction = async ({ text }: { text: any }) => {
const editor = ServerBlockNoteEditor.create();
const html = await editor.blocksToFullHTML(text);

return (
<div dangerouslySetInnerHTML={{ __html: html }} />
);
};

[Syammed2429]

Yep, I'm also getting the same error as @linhtrinh18 , please help to fix it @YousefED and @matthewlipski

'use server'

import { ServerBlockNoteEditor } from "@blocknote/server-util";

export const blockToYDoc= async ( blocks: any ) => {
const editor = ServerBlockNoteEditor.create();
const blocksToYDocs = await editor.blocksToYDoc (blocks);

return blocksToYDocs
}

error

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more:

[YousefED]

I've done some further investigation into this. I want to split my findings into two parts:

NextJS (SSR etc)
Because BlockNote blocks are defined using React, we need to access certain react functionality on the server to call BlockNote APIs. For example, we need to render certain components to get their HTML version (for Blocks To HTML / Blocks To Markdown, etc). This is different than most React apps, because BlockNote uses React internally as a framework. However, next.js seems to block various React calls. This means certain React APIs are not available for BlockNote to use when evaluating calls like "Blocks to HTML". I tried some workarounds but could not find an easy way to call React APIs not affected / blocked by the Next bundler.

It would be interesting to explore what a "next.js-first" architecture for BlockNote could look like (e.g.: with native support for SSR, etc). However, I think this would be several weeks of work at a minimum so it would require a corporate sponsor (I don't have a need for this feature myself at this moment).

A workaround for now is to run a regular Node server somewhere and use server-util from there, and then expose an API.

Non-node runtimes (bun, deno, etc)
There also was a report that JSDom doesn't work in non-node environments like Bun (https://discord.com/channels/928190961455087667/1015169282444894219/1269960495264305153). I think this should be fixable by making the DOM shim pluggable, and make it possible to use something like happy-dom instead of jsdom. Would gladly accept any PRs for this / will consider adding this option if there are more requests for this coming in

[moyezr]

Still kinda doesn't work with next.js api routes

⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

My use case: I am storing the contents of the editor in convex and in the server I want to retrieve them, parse them to blocks, and then using editor, parse them to markdown to generate vector embeddings for my AI application.

Any help is highly appreciated.

[YousefED]

Still kinda doesn't work with next.js api routes

⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

My use case: I am storing the contents of the editor in convex and in the server I want to retrieve them, parse them to blocks, and then using editor, parse them to markdown to generate vector embeddings for my AI application.

Any help is highly appreciated.

recommendation for now is to run a nodejs server

[moyezr]

Alrighty.

But I think it would be extremely useful if you could add server side compatibility with next.js as it's one of the most widely used frameworks.

Anyways, kudos to your work @YousefED .

[curiousyuvi]

I think I found a solution for this, instead of using server-util in api from app folder, use it in api from pages folder. I tried it with next 14.2.1 and it works fine. I rendered some basic blocks (p,h1,ul,ol) and few of my custom blocks.

Since nextjs allows you to have both pages and app folder implementation in a single project, you can just create a seperate pages api to handle your server-util.