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[bot]]

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}

   

[thedonmon]

@dosu Ok narrowing down some issues here. I have this in export-toolbar-button.tsx:

Argument of type 'TSlateEditor<Value, SlatePlugin<PluginConfig<"p", {}, {}, {}, {}>> | SlatePlugin<PluginConfig<"markdown", { allowedNodes: PlateType[] | null; disallowedNodes: PlateType[] | null; remarkPlugins: Plugin[]; rules: MdRules | null; allowNode?: AllowNodeConfig | undefined; }, { ...; } & Record<...>, {}, {}>> | ... 45 more...' is not assignable to parameter of type 'SlateEditor'.
  Type 'TSlateEditor<Value, SlatePlugin<PluginConfig<"p", {}, {}, {}, {}>> | SlatePlugin<PluginConfig<"markdown", { allowedNodes: PlateType[] | null; disallowedNodes: PlateType[] | null; remarkPlugins: Plugin[]; rules: MdRules | null; allowNode?: AllowNodeConfig | undefined; }, { ...; } & Record<...>, {}, {}>> | ... 45 more...' is not assignable to type '{ dom: { composing: boolean; currentKeyboardEvent: any; focused: boolean; prevSelection: TRange | null; readOnly: boolean; }; meta: UnknownObject & { isNormalizing?: boolean | undefined; } & { ...; }; ... 8 more ...; setOption: <C$1 extends AnyPluginConfig, K$1 extends keyof InferOptions<C$1>>(plugin: WithRequiredKe...'.
    Types of property 'meta' are incompatible.
      Type 'UnknownObject & { key: any; components: NodeComponents; isFallback: boolean; pluginCache: { decorate: string[]; handlers: { onChange: string[]; }; inject: { nodeProps: string[]; }; ... 4 more ...; useHooks: string[]; }; pluginList: any[]; uid?: string | undefined; } & { ...; } & { ...; }' is not assignable to type 'UnknownObject & { isNormalizing?: boolean | undefined; } & { key: any; components: NodeComponents; userId?: string | null | undefined; isFallback: boolean; pluginCache: { ...; }; pluginList: any[]; uid?: string | undefined; }'.
        Type 'UnknownObject & { key: any; components: NodeComponents; isFallback: boolean; pluginCache: { decorate: string[]; handlers: { onChange: string[]; }; inject: { nodeProps: string[]; }; ... 4 more ...; useHooks: string[]; }; pluginList: any[]; uid?: string | undefined; } & { ...; } & { ...; }' is not assignable to type '{ key: any; components: NodeComponents; userId?: string | null | undefined; isFallback: boolean; pluginCache: { decorate: string[]; handlers: { onChange: string[]; onNodeChange: string[]; onTextChange: string[]; }; ... 5 more ...; useHooks: string[]; }; pluginList: any[]; uid?: string | undefined; }'.
          The types of 'pluginCache.handlers' are incompatible between these types.
            Type '{ onChange: string[]; }' is missing the following properties from type '{ onChange: string[]; onNodeChange: string[]; onTextChange: string[]; }': onNodeChange, onTextChangets(2345)
            ```
            
            And in the apiroute `ai/command/route.ts` there are a ton of errors: 
            
            ```
'"ai"' has no exported member named 'createUIMessageStreamResponse'. Did you mean 'createDataStreamResponse'?
Module '"ai"' has no exported member 'UIMessageStreamWriter'
Module '"ai"' has no exported member 'createUIMessageStream'.
Property 'output' does not exist on type 'GenerateTextResult<ToolSet, never>'
Property 'output' does not exist on type 'GenerateTextResult<ToolSet, never>'.
Property 'defaultObjectGenerationMode' is missing in type 'LanguageModelV3' but required in type 'LanguageModelV1'.ts(2741)
index.d.ts(976, 14): 'defaultObjectGenerationMode' is declared here.
index.d.ts(3018, 5): The expected type comes from property 'model' which is declared here on type 'CallSettings & Prompt & { model: LanguageModelV1; tools?: { comment: Tool<ToolParameters, void> & { execute: (args: any, options: ToolExecutionOptions) => PromiseLike<...>; }; table: Tool<...> & { ...; }; } | undefined; ... 17 more ...; _internal?: { ...; } | undefined; }'

[dosubot[bot]]

Here’s how to resolve the issues you’re seeing after upgrading to Plate v52:

1. Type error in export-toolbar-button.tsx (TSlateEditor/SlateEditor):
Plate v52’s SlateEditor type now expects meta.pluginCache.handlers to include onChange, onNodeChange, and onTextChange arrays. If your editor instance only has onChange, you’ll get this type error. Make sure your editor is created using the latest Plate APIs and that all plugins are updated—don’t manually construct or extend the editor meta, and avoid mixing old and new plugin configs. If you have custom code that builds the editor, update it to match the new structure or use the official factory/utilities.
Reference

2. Missing exports (serializeHtml, getEditorDOMFromHtmlString):
These are no longer exported from platejs. Import them from platejs/static instead:

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

Reference

3. AI API route errors (createUIMessageStreamResponse, UIMessageStreamWriter, etc):
These exports have been removed or renamed in the latest ai package. The current pattern is to use streamText and call .toDataStreamResponse() on the result:

import { streamText, convertToCoreMessages } from 'ai';
import { createOpenAI } from '@ai-sdk/openai';

const result = streamText({
  // ...your options
});
return result.toDataStreamResponse();

Reference

4. General migration checklist for Plate v52:

• All @platejs/* and platejs packages must be on the exact same version (use depset to align).
• Remove any direct slate* dependencies from your package.json.
• Set "moduleResolution": "bundler" in your tsconfig.json.
• Update next.config.js to transpile all @platejs packages for ESM support:

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

• Deduplicate any Slate dependencies in your lockfile.
  Reference

5. AI SDK v5 compatibility:
Plate’s useEditorChat only supports the v4 chat object shape. If you use v5, you’ll get type errors—workaround is to use a type assertion (chat as any) for now.
Reference

If you hit more type errors, double-check all imports and plugin configs for legacy patterns. Let me know if you need help with a specific file or stack trace.

To reply, just mention @dosu.

---

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