'ContentEditable' cannot be used as a JSX component

[sernaferna]

I'm sure I'm missing something obvious, but I'm being tripped up trying to build an editor from the ground up: all of the examples I see use the contentEditable property of the RichTextPlugin in the same way, and I've done the same:

import React from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';

export const SHXEditor = () => {
  return (
    <LexicalComposer initialConfig={{ namespace: 'SHXEditor', onError: (error) => console.error(error) }}>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter some text...</div>}
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
      <AutoFocusPlugin />
    </LexicalComposer>
  );
};

But I get the aforementioned error at compile time from TypeScript for that <ContentEditable/> param: "'ContentEditable' cannot be used as a JSX component."

Excerpts from my package.json:

{
  "peerDependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "dependencies": {
    "@lexical/react": "^0.23.1",
    "lexical": "^0.23.1"
  },
  "devDependencies": {
    "@types/node": "^22.12.0",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "typescript": "^5.7.3",
  }
}

As for tsconfig, it's a mono repo with a bunch of dependencies, but essentially this (in case it's relevant):

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "sourceMap": true,
    "inlineSourceMap": false,
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": "src",
    "jsx": "react-jsx"
  },
  "include": "src"
}

[sernaferna]

Through various edits this problem went away on its own -- though I never discovered the actual issue