Uncaught TypeError: editor is null after upgrade 19.7.0 -> 22.0.2

[linonetwo]

But when I console.log the const editor = usePlateEditorRef();, it is not null.

Uncaught TypeError: editor is null
    isEmpty $:/plugins/linonetwo/slate-write/editor/index.js:9024
    isElementEmpty2 $:/plugins/linonetwo/slate-write/editor/index.js:50984
    Placeholder $:/plugins/linonetwo/slate-write/editor/index.js:71568
    renderWithHooks react-dom:16317

Uncaught TypeError: editor is null
    useFloatingToolbar $:/plugins/linonetwo/slate-write/editor/index.js:60563
    BalloonToolbar $:/plugins/linonetwo/slate-write/editor/index.js:60602

The above error occurred in the <Placeholder> component:

Placeholder@$:/plugins/linonetwo/slate-write/editor/index.js:71564:7
withDraggable/<@$:/plugins/linonetwo/slate-write/editor/index.js:72798:28
ElementProviderChild@$:/plugins/linonetwo/slate-write/editor/index.js:18364:28
Provider@$:/plugins/linonetwo/slate-write/editor/index.js:5018:16
Provider@$:/plugins/linonetwo/slate-write/editor/index.js:5018:16
ElementProvider@$:/plugins/linonetwo/slate-write/editor/index.js:18377:25
Element3@$:/plugins/linonetwo/slate-write/editor/index.js:16386:7
div
DefaultElement@$:/plugins/linonetwo/slate-write/editor/index.js:16463:7
Element3@$:/plugins/linonetwo/slate-write/editor/index.js:16386:7
div
DefaultElement@$:/plugins/linonetwo/slate-write/editor/index.js:16463:7
Element3@$:/plugins/linonetwo/slate-write/editor/index.js:16386:7
div
DefaultElement@$:/plugins/linonetwo/slate-write/editor/index.js:16463:7
Element3@$:/plugins/linonetwo/slate-write/editor/index.js:16386:7
Children@$:/plugins/linonetwo/slate-write/editor/index.js:16782:117
div
RestoreDOM<@$:/plugins/linonetwo/slate-write/editor/index.js:16747:7
Editable@$:/plugins/linonetwo/slate-write/editor/index.js:16784:64
PlateEditable@$:/plugins/linonetwo/slate-write/editor/index.js:22773:23
Slate@$:/plugins/linonetwo/slate-write/editor/index.js:17846:7
PlateSlate@$:/plugins/linonetwo/slate-write/editor/index.js:22904:20
Plate@$:/plugins/linonetwo/slate-write/editor/index.js:22926:15
Editor2@$:/plugins/linonetwo/slate-write/editor/index.js:75052:40
PlateProviderEffects@$:/plugins/linonetwo/slate-write/editor/index.js:22823:30
Provider@$:/plugins/linonetwo/slate-write/editor/index.js:5018:16
Provider@$:/plugins/linonetwo/slate-write/editor/index.js:5018:16
PlateProviderContent@$:/plugins/linonetwo/slate-write/editor/index.js:22830:30
PlateProvider@$:/plugins/linonetwo/slate-write/editor/index.js:22898:7

The above error occurred in the <BalloonToolbar> component:

BalloonToolbar@$:/plugins/linonetwo/slate-write/editor/index.js:60596:7
BallonToolbar
PlateEditable@$:/plugins/linonetwo/slate-write/editor/index.js:22773:23
Slate@$:/plugins/linonetwo/slate-write/editor/index.js:17846:7
PlateSlate@$:/plugins/linonetwo/slate-write/editor/index.js:22904:20
Plate@$:/plugins/linonetwo/slate-write/editor/index.js:22926:15
Editor2@$:/plugins/linonetwo/slate-write/editor/index.js:75052:40
PlateProviderEffects@$:/plugins/linonetwo/slate-write/editor/index.js:22823:30
Provider@$:/plugins/linonetwo/slate-write/editor/index.js:5018:16
Provider@$:/plugins/linonetwo/slate-write/editor/index.js:5018:16
PlateProviderContent@$:/plugins/linonetwo/slate-write/editor/index.js:22830:30
PlateProvider@$:/plugins/linonetwo/slate-write/editor/index.js:22898:7

[linonetwo]

Compiled code has a const editor = usePlateEditorState2(); this 2 usually generated by webpack when multiple version included.

So I guess maybe it is due to multiple versions of @udecode/plate-core, so

$ pnpm ls --depth Infinity @udecode/plate-core 
@udecode/plate-core 22.0.2
@udecode/plate-dnd 22.0.2
└─┬ @udecode/plate-common 22.0.2
  ├── @udecode/plate-core 22.0.2
  └─┬ @udecode/plate-utils 22.0.2
    └── @udecode/plate-core 22.0.2
...
@udecode/plate-ui-toolbar 21.5.0
├─┬ @udecode/plate-common 21.5.0
│ ├── @udecode/plate-core 21.5.0
│ └─┬ @udecode/plate-utils 21.5.0
│   └── @udecode/plate-core 21.5.0
├─┬ @udecode/plate-floating 21.5.0
│ └─┬ @udecode/plate-common 21.5.0
│   ├── @udecode/plate-core 21.5.0
│   └─┬ @udecode/plate-utils 21.5.0
│     └── @udecode/plate-core 21.5.0
├─┬ @udecode/plate-styled-components 21.5.0
│ └─┬ @udecode/plate-common 21.5.0
│   ├── @udecode/plate-core 21.5.0
│   └─┬ @udecode/plate-utils 21.5.0
│     └── @udecode/plate-core 21.5.0
└─┬ @udecode/plate-ui-button 21.5.0
  ├─┬ @udecode/plate-button 21.5.0
  │ └─┬ @udecode/plate-common 21.5.0
  │   ├── @udecode/plate-core 21.5.0
  │   └─┬ @udecode/plate-utils 21.5.0
  │     └── @udecode/plate-core 21.5.0
  ├─┬ @udecode/plate-common 21.5.0
  │ ├── @udecode/plate-core 21.5.0
  │ └─┬ @udecode/plate-utils 21.5.0
  │   └── @udecode/plate-core 21.5.0
  └─┬ @udecode/plate-styled-components 21.5.0
    └─┬ @udecode/plate-common 21.5.0
      ├── @udecode/plate-core 21.5.0
      └─┬ @udecode/plate-utils 21.5.0
        └── @udecode/plate-core 21.5.0
@udecode/plate-utils 22.0.2
└── @udecode/plate-core 22.0.2

So I add this to package.json

  "pnpm": {
    "overrides": {
      "@udecode/plate-core": "$@udecode/plate-core"
    },
    "peerDependencyRules": {
      "allowedVersions": {
        "@udecode/plate-core": "$@udecode/plate-core"
      }
    }
  },

And it is solved.

[12joan]

If you're using Plate 22 and all Plate dependencies in your package.lock have versions starting with 22, then no code from Plate 21 should be present in your project. Can you check the version constraints in your package.json to make sure no outdated versions are being used?

[linonetwo]

@12joan I surely want this, but @udecode/plate-ui-dnd 's latest version is just 21.5.0 , I know it will take some time to update.

[12joan]

Oh, I see the confusion. Plate's UI packages no longer exist in version 22+. See Plate's new docs for instructions on migrating your UI. https://platejs.org.

In the meantime, you might want to fully downgrade to Plate 21 to prevent errors.

[linonetwo]

If you do this

  "pnpm": {
    "overrides": {
      "@udecode/plate-core": "$@udecode/plate-core",
      "@udecode/plate-common": "$@udecode/plate-common",
      "react": "$react",
      "react-dom": "$react-dom"
    },
    "peerDependencyRules": {
      "allowedVersions": {
        "@udecode/plate-core": "$@udecode/plate-core",
        "@udecode/plate-common": "$@udecode/plate-common",
        "react": "$react",
        "react-dom": "$react-dom"
      }
    }
  },

to pin the @udecode/plate-common

there will be webpack errors:

    {
      detail: undefined,
      id: '',
      location: {
        column: 91,
        file: 'node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_react@18._afs2acy3bi6bcujdfp6kxmcqay/node_modules/@udecode/plate-link/dist/index.es.js',
        length: 15,
        line: 1,
        lineText: "import { getPluginType, getPluginOptions, sanitizeUrl, createComponentAs, createElementAs, useElementProps, createStore, findNode, getEditorString, useEditorRef, mergeProps, useComposedRef, usePlateSelection, insertNodes, focusEditor, withoutNormalizing, getAboveNode, splitNodes, isElement as isElement$2, unwrapNodes, repl,
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No matching export in "node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_react@1_vl6eyn723ulycuiebx32hssooq/node_modules/@udecode/plate-common/dist/index.es.js" for import "useElementProps"'
    },