Upgrading Plate from 49 -> 52 tons of issues even after depset and manual installs.

[thedonmon]

Description

I'm trying to understand the best way to upgrade from 49 to 52 to take advantage of the ai-sdk upgrade to v5. I tried several ways for updates but im running into so many type issues on "non existent" methods from the exports I cant seem to figure out the best way to do this. I ran pnpm dlx depset@latest @platejs 52 && npx depset@latest platejs 52 to try and pin everything after installing the latest ai-editor

I had installed the ai-kit using shadcn registries and so after reading through some similar issues here, I used the troubleshoot guide to make sure everything is on the correct version. What are the best ways to ensure a clean install and update of plate components? For example im seeing this:

pnpm build:

./src/components/ui/export-toolbar-button.tsx
Attempted import error: 'serializeHtml' is not exported from 'platejs' (imported as 'serializeHtml').

./src/components/ui/import-toolbar-button.tsx
Attempted import error: 'getEditorDOMFromHtmlString' is not exported from 'platejs' (imported as 'getEditorDOMFromHtmlString').

./src/components/editor/use-chat.ts:116:52
Type error: Argument of type 'unknown' is not assignable to parameter of type 'AIToolName'.

  114 |     onData(data) {
  115 |       if (data.type === 'data-toolName') {
> 116 |         editor.setOption(AIChatPlugin, 'toolName', data.data);
      |                                                    ^
  117 |       }
  118 |
  119 |       if (data.type === 'data-comment' && data.data) {

Using NextJS 15.5.7

pnpm why platejs:

@platejs/ai 52.0.6
├─┬ @platejs/markdown 52.0.4
│ └── platejs 52.0.8 peer
├─┬ @platejs/selection 52.0.1
│ └── platejs 52.0.8 peer
├─┬ @platejs/suggestion 52.0.1
│ ├─┬ @platejs/diff 52.0.1
│ │ └── platejs 52.0.8 peer
│ └── platejs 52.0.8 peer
└── platejs 52.0.8 peer
@platejs/autoformat 52.0.1
└── platejs 52.0.8 peer
@platejs/basic-nodes 52.0.1
└── platejs 52.0.8 peer
@platejs/basic-styles 52.0.1
└── platejs 52.0.8 peer
@platejs/callout 52.0.1
└── platejs 52.0.8 peer
@platejs/caption 52.0.1
└── platejs 52.0.8 peer

pnpm why @platejs/core :

@platejs/ai 52.0.6
├─┬ @platejs/markdown 52.0.4
│ └─┬ platejs 52.0.8 peer
│   ├── @platejs/core 52.0.8
│   └─┬ @platejs/utils 52.0.8
│     └── @platejs/core 52.0.8
├─┬ @platejs/selection 52.0.1
│ └─┬ platejs 52.0.8 peer
│   ├── @platejs/core 52.0.8
│   └─┬ @platejs/utils 52.0.8
│     └── @platejs/core 52.0.8
├─┬ @platejs/suggestion 52.0.1
│ ├─┬ @platejs/diff 52.0.1
│ │ └─┬ platejs 52.0.8 peer
│ │   ├── @platejs/core 52.0.8
│ │   └─┬ @platejs/utils 52.0.8
│ │     └── @platejs/core 52.0.8
│ └─┬ platejs 52.0.8 peer
│   ├── @platejs/core 52.0.8
│   └─┬ @platejs/utils 52.0.8
│     └── @platejs/core 52.0.8
└─┬ platejs 52.0.8 peer
  ├── @platejs/core 52.0.8
  └─┬ @platejs/utils 52.0.8
    └── @platejs/core 52.0.8

Any help or guidance is appreciated here! Maybe I need to update my nextjs version to latest?

Reproduction URL

No response

Reproduction steps

1. npx shadcn@latest add https://platejs.org/r/ai-kit    
2. pnpm dlx depset@latest @platejs 52 && npx depset@latest platejs 52
3. pnpm build
4. All the linting and type errors (some packages like @ai-sdk/gateway needed to be installed manually).

Plate version

52

Slate React version

{}

Screenshots

Logs

Browsers

No response

[dosubot]

Hi @thedonmon! I'm Dosu and I’m helping the plate team.

Here’s how to fix the upgrade issues:

• For missing exports: In Plate v52, import serializeHtml and getEditorDOMFromHtmlString from platejs/static, not platejs (source, source).

  import { serializeHtml, getEditorDOMFromHtmlString } from 'platejs/static'

• For the AIToolName type error: Plate v52 expects a strict union type for toolName ('comment' | 'edit' | 'generate' | null). If your data is unknown, you need to assert or validate it before passing:

  import type { AIToolName } from '@platejs/ai/lib/types'
  // ...
  if (data.type === 'data-toolName') {
    editor.setOption(AIChatPlugin, 'toolName', data.data as AIToolName)
  }

  Or, validate the value before setting.

• For AI SDK v5: Plate’s useEditorChat only supports the v4 chat object shape right now. If you use v5, you’ll get type errors. The only workaround is to use a type assertion (chat as any) (source).

• Best practices for a clean install:

  1. Use pnpm dlx depset@latest @platejs 52 to align all versions.
  2. Make sure all imports use the new package names (@platejs/*).
  3. Remove any direct slate* dependencies from your package.json—Plate manages these.
  4. If you see duplicate Slate versions, use resolutions in your package.json to force a single version (source).
  5. For Next.js, v15.5.7 is fine, but set "moduleResolution": "bundler" in your tsconfig.json for best compatibility (source).
  6. Update your next.config.js to transpile all @platejs packages for ESM support (source):

     // next.config.js
     const nextConfig = {
       transpilePackages: [
         ...require('fs')
           .readdirSync('node_modules')
           .filter(pkg => pkg.startsWith('@udecode') || pkg.includes('platejs')),
       ],
     }
     module.exports = nextConfig

• For static rendering, only use static-safe components with serializeHtml. Pass components to createSlateEditor({ components }), not directly to serializeHtml (source).

Let me know if you hit any other errors!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}