Plate editor breaks when rendering in next.js app router api route

[chrisui]

Description

Importing and using createPlateEditor inside a next.js server api route, an error will occur.

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

Related but an aside, when using next.js with turbo (what I had previously) an alternative error occurs:

./node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/jotai/esm/react.mjs/proxy.js
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)

This might not be a pure bug but rather a limitation of using plate in server side next.js that could have a workaround or could just not be feasible. Either way, given popularity of next.js it might be worth adding to the server-side rendering docs

Reproduction URL

https://codesandbox.io/p/devbox/rw7lhk?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm6aq97sb00063b6k19g8y6qy%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm6aq97sb00023b6kgdamu4lx%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm6aq97sb00043b6k1u93ggwn%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm6aq97sb00053b6km6ao42el%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm6aq97sb00023b6kgdamu4lx%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm6aq97sb00013b6kv938v7se%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522cm6aq97sb00023b6kgdamu4lx%2522%252C%2522activeTabId%2522%253A%2522cm6aq97sb00013b6kv938v7se%2522%257D%252C%2522cm6aq97sb00053b6km6ao42el%2522%253A%257B%2522id%2522%253A%2522cm6aq97sb00053b6km6ao42el%2522%252C%2522activeTabId%2522%253A%2522cm6aqff4z00463b6ki3xvgki5%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522cm6aqff4z00463b6ki3xvgki5%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm6aq97sb00043b6k1u93ggwn%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm6aq97sb00033b6kq7424iu5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522cm6aq97sb00043b6k1u93ggwn%2522%252C%2522activeTabId%2522%253A%2522cm6aq97sb00033b6kq7424iu5%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Reproduction steps

1. Go to reproduction url
2. View terminal
3. See error

Plate version

41.0.5

Slate React version

^0.112.0

Screenshots

Logs

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at (rsc)/./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@udecode/react-hotkeys/dist/index.mjs (.next/server/vendor-chunks/@[email protected][email protected][email protected]:20:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at (rsc)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_alhhgwnddewh4vpkkpxaj7buqe/node_modules/@udecode/plate-core/dist/react/index.mjs (.next/server/vendor-chunks/@[email protected]_@[email protected][email protected][email protected][email protected]_alhhgwnddewh4vpkkpxaj7buqe.js:30:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./app/api/export/html/route.ts:9:85)
    at (rsc)/./app/api/export/html/route.ts (.next/server/app/api/export/html/route.js:141:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at (rsc)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/next-app-loader/index.js?name=app%2Fapi%2Fexport%2Fhtml%2Froute&page=%2Fapi%2Fexport%2Fhtml%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fexport%2Fhtml%2Froute.ts&appDir=%2Fproject%2Fworkspace%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2Fproject%2Fworkspace&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D! (.next/server/app/api/export/html/route.js:110:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at __webpack_exec__ (.next/server/app/api/export/html/route.js:173:39)
    at <unknown> (.next/server/app/api/export/html/route.js:174:2844)
    at __webpack_require__.X (.next/server/webpack-runtime.js:163:21)
    at <unknown> (.next/server/app/api/export/html/route.js:174:47)
    at Object.<anonymous> (.next/server/app/api/export/html/route.js:177:3)

Browsers

No response

[zbeyens]

You'll need to use createSlateEditor server-side, see https://platejs.org/docs/examples/server-side

[chrisui]

@zbeyens I get the same issue when changing to createSlateEditor (see the repro codesandbox). there's other modules importing plate-core which imports udecode/react-hotkeys which is using createContext which seems to be something you cant do on nextjs app router server side.

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@udecode/react-hotkeys/dist/index.mjs
file:///project/workspace/.next/server/vendor-chunks/@[email protected][email protected][email protected] (20:1)
__webpack_require__
file:///project/workspace/.next/server/webpack-runtime.js (33:43)
./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_alhhgwnddewh4vpkkpxaj7buqe/node_modules/@udecode/plate-core/dist/react/index.mjs

note the minimal repro setup of components is just a subset of the plate-template for nextjs

[chrisui]

To be clear, the error isn't occuring within any function call but rather from the imports when modules are initialised. top level createContext call in next app router environment in this case.

[zbeyens]

This is weird the RSC is running well since it does not support such import as well

[zbeyens]

Rule of thumb: you can't import from any packages ending with /react. I can see a few ones in the sandbox.

[chrisui]

Rule of thumb: you can't import from any packages ending with /react. I can see a few ones in the sandbox.

Interesting. How do I reference correctly all the plugins for my various components? Eg. import { HighlightPlugin } from '@udecode/plate-highlight/react'; - do I use import { BaseHighlightPlugin } from '@udecode/plate-highlight';?

Or do I not even need the plugins and it's more about the component mapping and there I need to maintain a copy of all the right component keys rather than referencing the plugin directly (eg. HighlightPlugin.key?

[chrisui]

Update: Using the base plugins (eg import { BaseHighlightPlugin } from '@udecode/plate-highlight';) worked!

Thanks for the help. Will just need to go through and not use /react imports.