Server Endpoint for Converting HTML to Plate format

[mstelz]

Using NextJS I have an app/api/route.ts with the following:

export async function POST(request: Request) {
    const editor = createPlateEditor({ plugins });
    const json = deserializeHtml(editor, {element: request.body}
    
    return Response.json(json)
}

but when I try to run it I receive the error

TypeError: 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

What am I missing? I thought this was possible but correct me if I am wrong.

Thanks in advance!

[zbeyens]

We need assistance to fix that one. @udecode/plate-core is using jotai-x which is using React context, which is not used by createPlateEditor so the issue is in the build config (either here or in jotai-x, both have the same tsup config)

[mstelz]

so in my experience for this to be properly tree shakable, we would need multiple entry points rather than the single index we are providing for core today. Then each entry point is properly shakable, at least that was my experience with Rollup.

https://kettanaito.com/blog/building-a-treeshakable-library-with-rollup

or libraries like Material have it setup in which you can do import Button from "@mui/material-ui/Button" compared to import { Button } from "@mui/material-ui"

I am no expert in this space, but this is how I've had my libraries in the past be tree shakable by utilizing multiple entry points.

I do notice that tsup has a --treeshake option to utilize rollup when their default esbuild doesnt work: https://tsup.egoist.dev/#tree-shaking

in rollup it would look something like:

{
  format: "es",
  // Use a directory instead of a file as it will output multiple
  dir: 'dist/esm'
  // Keep a separate file for each module
  preserveModules: true,
  // Optionally strip useless path from source
  preserveModulesRoot: 'lib',
}

it appears, you are using barrelsby and a somewhat old issue mentions at least in something like CRA it hinders shakability

[zbeyens]

createPlateEditor was working in SSR before introducing jotai-x. The magic fix was to always use React.use... instead of importing the corresponding hook. There is probably a hidden config that could fix it... @clerk/nextjs is a good reference as a package that export both client and server utilities.

Using multiple entry points is a solution we could consider. We can keep the default root one without breaking changes, and add one /server for anything that is not coupled to React (or jotai-x). PR's welcome!

[zbeyens]

See these references:

• https://github.com/vercel/ai/blob/main/packages/core/tsup.config.ts separates react and rsc
• https://github.com/timolins/react-hot-toast/blob/main/tsup.config.ts separates react and headless

[mstelz]

ill take a crack at it and see what I can come up with

[lukajincharadze]

Move Client-Specific Code: If possible, move the code that uses createContext or other client-specific functionality to client-side components. This way, it will only be executed in the browser environment.

Conditional Import: If the code cannot be moved entirely to the client side, you can conditionally import the module that contains the client-specific functionality. This way, the code won't be executed on the server:

import { createPlateEditor } from 'module-that-contains-client-specific-functionality';

export async function POST(request: Request) {
const editor = createPlateEditor({ plugins });
const json = deserializeHtml(editor, {element: request.body});

return Response.json(json);

}

[zbeyens]

Tracked in #3177