[lexical-react] Bug Fix: Import JSX type from React to prevent "Cannot find namespace 'JSX'"-error when type-checking with React 19

[Svish]

Description

When using @lexical/react with Typescript and React 19, we get several "Cannot find namespace 'JSX'" errors. As described in the React 19 Upgrade Guide the global JSX namespace has been removed in favor of React.JSX.

Here's some of the errors I get when running type-check on our project after adding @lexical/react:

node_modules/@lexical/react/LexicalComposer.d.ts(23,78): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalContentEditable.d.ts(15,51): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalContentEditable.d.ts(15,66): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalErrorBoundary.d.ts(10,15): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalErrorBoundary.d.ts(13,98): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalRichTextPlugin.d.ts(11,22): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalRichTextPlugin.d.ts(12,52): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalRichTextPlugin.d.ts(12,74): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalRichTextPlugin.d.ts(14,5): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/shared/useDecorators.d.ts(11,15): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/shared/useDecorators.d.ts(15,103): error TS2503: Cannot find namespace 'JSX'.

In this PR I've attempted to replace all cases of JSX.Element with React.JSX.Element under packages/lexical-react.

I have also added import type {React} from 'react';import * as React from 'react'; to the files which didn't already have import * as React from 'react'; in the file. (using import type {React} from 'react'; seems to have triggered "error TS2596: 'React' can only be imported by turning on the 'esModuleInterop' flag and using a default import.", so I just did import * as React from 'react'; instead, which I see have been used other places in the codebase as well)

[facebook-github-bot]

Hi @Svish!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 24, 2025 7:41pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 24, 2025 7:41pm

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	29.07 KB (0%)
lexical - esm	28.86 KB (0%)
@lexical/rich-text - cjs	38.04 KB (0%)
@lexical/rich-text - esm	30.92 KB (0%)
@lexical/plain-text - cjs	36.55 KB (0%)
@lexical/plain-text - esm	28.22 KB (0%)
@lexical/react - cjs	39.85 KB (0%)
@lexical/react - esm	32.28 KB (0%)

[etrepum]

import type {React} from 'react' is not the same thing which is why you're getting the error. Can you start by providing an example project that reproduces this issue? The examples in the lexical repo do not have this issue building with React 19. There's no way for us to know if these changes fix anything without a way to reproduce the problem.

[Svish]

Are the examples written with Typescript, and does it type check with lib/node_modules included?

I will try to setup a sample repo. Can't share the one where I ran into this, as it's proprietary.

For what it's worth, I've ran into this same issue with several other projects too (for example react-datepicker), and after they have fixed their types to be React 19 compatibility, then the issue going away.

[etrepum]

Yes they are typescript, I don't know all of the settings off the top of my head, but a reproduction is needed to evaluate the fix and prevent future regressions either way.

[Svish]

Ok, I've found a simple way to reproduce it:

1. Take the example examples/react-rich from this repo
2. Remove "skipLibCheck": true form the tsconfig.json files
3. Then run the following commands:

npm i
npm i react@19 @types/react@19 react-dom@19 @types/react-dom@19 @vitejs/plugin-react@latest typescript@latest vite@5
npx tsc --noEmit

That should give the same errors that I'm getting (and are hopefully gone after this fix):

node_modules/@lexical/react/LexicalComposer.d.ts(23,78): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalContentEditable.d.ts(15,51): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalContentEditable.d.ts(15,66): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalErrorBoundary.d.ts(10,15): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalErrorBoundary.d.ts(13,98): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalRichTextPlugin.d.ts(11,22): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalRichTextPlugin.d.ts(12,52): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalRichTextPlugin.d.ts(12,74): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalRichTextPlugin.d.ts(14,5): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/LexicalTreeView.d.ts(37,5): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/shared/useDecorators.d.ts(11,15): error TS2503: Cannot find namespace 'JSX'.
node_modules/@lexical/react/shared/useDecorators.d.ts(15,103): error TS2503: Cannot find namespace 'JSX'.
src/plugins/TreeViewPlugin.tsx(12,43): error TS2503: Cannot find namespace 'JSX'.

[Svish]

I also changed the PR to add import type {JSX} from 'react'; instead of changing JSX.Element to React.JSX.Element and did so across the whole project rather than just for packages/lexical-react.

[etrepum]

This PR is failing integrity checks, it looks like the prettier autofixes haven't been run

[etrepum]

npm run prettier:fix should sort this out, then do another commit and push

[Svish]

It was eslint! Thought I had pasted in the JSX import correctly enough, but this project apparently has an import sort order plugin. Running npm run lint -- --fix has hopefully solved it 👍

I did try to run npm run prettier:fix first, but that resulted in a change in every single file in the whole repo, so ... not sure what's up with that ... 😬

[etrepum]

Looks good, thanks! I've added a follow-up issue #7093 to prevent future regressions.