useElement no longer seem to work in custom Element after upgrading to

[maxott]

Description

I built a custom element and after updating to latest plate/slate, rendering the tag fails with:

Uncaught Error: useEditorRef must be used inside a Plate or PlateController
    at usePlateEditorStore (createPlateStore.ts:122:11)
    at usePlateSelectors (createPlateStore.ts:134:17)
    at useEditorRef (useEditorRef.ts:15:6)
    at useElement (useElement.ts:13:18)
    at wi_line.tsx:30:58

Not sure on what changed, or what I initially got away with.

Reproduction URL

No response

Reproduction steps

Code:


import {
  createPlatePlugin,
  PlateElement,
  useElement,
  withRef,
} from "@udecode/plate/react"

const WiTagElement = withRef<
  typeof PlateElement,
  {
    onClick?: (mentionNode: any) => void
  }
>(({ children, className, prefix, onClick, ...props }, ref) => {
  const element = useElement<WiTagElementT>()
  ...
  return (
    <PlateElement
  ...
}
...
createPlatePlugin({
    key: WiTagPlugin,
    node: {
      isElement: true,
      isInline: true,
      isVoid: true,
      component: WiTagElement,
    },
  }),

New error:

Uncaught Error: useEditorRef must be used inside a Plate or PlateController
    at usePlateEditorStore (createPlateStore.ts:122:11)
    at usePlateSelectors (createPlateStore.ts:134:17)
    at useEditorRef (useEditorRef.ts:15:6)
    at useElement (useElement.ts:13:18)
    at wi_line.tsx:30:58

### Plate version

"@udecode/cn": "^39.0.0",     "@udecode/plate": "^39.3.7",     "@udecode/plate-common": "^39.2.21",

### Slate React version

 "slate": "^0.110.2",     "slate-history": "^0.110.3",     "slate-hyperscript": "^0.100.0",     "slate-react": "^0.111.0",     "slate-dom": "^0.111.0"

### Screenshots

_No response_

### Logs

_No response_

### Browsers

_No response_

[zbeyens]

Needs a reproduction. It's probably package versions not synced together

[zbeyens]

Did you also install @udecode/plate-common or -core?

[maxott]

No, my package.json:

  "dependencies": {
    "@udecode/cn": "^39.0.0",
    "@udecode/plate": "^39.1.3",
    "slate": "^0.110.2",
    "slate-dom": "^0.111.0",
    "slate-history": "^0.110.3",
    "slate-hyperscript": "^0.100.0",
    "slate-react": "^0.111.0"
  },

I tried to revert back to what worked before ("39.1.3"), but that is now also resolving to:

"@udecode/plate@^39.1.3":
   ...
    "@udecode/plate-common" "39.2.21"

"@udecode/[email protected]":
  ...
  dependencies:
    "@udecode/plate-core" "39.2.21"

[zbeyens]

You could try to install the individual packages instead of @udecode/plate

[maxott]

Thanks, is there any guidance on the version numbering which should work? Should that be "all with the same major/minor, but latest patch", or is there anything else I should look out for.

Unfortunately, this is a pretty big code base and I'm still trying to make sense of it even at the architectural level. Very powerful, though. I guess that's why I'm here :)

[zbeyens]

Take a look at https://github.com/udecode/plate-playground-template

[maxott]

As @zbeyens suggested, install the individual packages instead of @udecode/plate.
A good starting point is the package.json file in https://github.com/udecode/plate-playground-template