Why can't my custom Lexical React plugin use the LexicalComposerContext?

Question

function UpdateStatePlugin(props) {
  ...
  const [editor] = useLexicalComposerContext();
  ...
}

function Notes() {
  ...

  const initialConfig = {
    ...
  };

  return (
    <LexicalComposer initialConfig={initialConfig}>
      ...
      <UpdateStatePlugin />
    </LexicalComposer>
  )
}

This fails with 'useLexicalComposerContext' is not defined

I followed this guide and found 1 mention of someone running into a similar problem here. In both cases the structure seems to resemble what I have written. Would appreciate any help!

Answer 1

It's ok to define UpdateStatePlugin in the same file. The important part is that UpdateStatePlugin needs to be a child of LexicalComposer.

Your error, 'useLexicalComposerContext' is not defined, looks like one you'd see if you were missing an import. Try adding this to the top of your file:

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';