facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
18.77k stars 1.58k forks source link

Bug: Destructuring LexicalErrorBoundary in React Import Causes Typescript Error #6158

Open hkiame opened 3 months ago

hkiame commented 3 months ago

This issue is related to the official Lexical documentation for "Getting Started with React"

Steps To Reproduce

  1. Follow the guide on the Lexical documentation page mentioned above.
  2. In the code example under "Creating Basic Rich Text Editor", the import statement attempts to destructure LexicalErrorBoundary as follows:
    import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
  3. This code will trigger a Typescript error stating: "@lexical/react/LexicalErrorBoundary" has no exported member named 'LexicalErrorBoundary'. Did you mean 'LexicalErrorBoundaryProps'?

The current behavior

Destructuring LexicalErrorBoundary in the import statement leads to a Typescript error because the exported member might be the component itself instead of a named export.

The expected behavior

The documentation should import the component directly without destructuring:

import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
etrepum commented 3 months ago

This is because the documentation reflects the in-development version of lexical, when the next version is released (presumably 0.16.0), this will work. See #6088 (the breaking change to the docs) and #6144 (hopefully a plan will be made to reduce the pain that bleeding edge docs cause in the future)