Since 5.7.2: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.

[RobertSandiford]

🔎 Search Terms

Search/Keywords: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.

🕗 Version & Regression Information

Since 5.7.2. No 5.7.0 or 5.7.1 available. OK in 5.6.3

⏯ Playground Link

Best effort Playground

💻 Code

    <>
        <h1>Logged Out</h1>
    </>

🙁 Actual behavior

Since TS 5.7.2 JSX Fragments are no longer accepted.

Compile error: error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.

🙂 Expected behavior

JSX Fragments should continue to work

Additional information about the issue

I have a custom JSX setup, I'm not using React. babel-preset-react is used to transform JSX. This grabs Fragment from the JSX runtime provided and passes this as the node type when creating the element via the JSX runtime. It has been working since TS 4 until now.

Compiled output:

import { jsx as _jsx, Fragment as _Fragment } from "tungsten/jsxRuntime.js";
...
    _jsx(_Fragment, {
        children: _jsx("h1", {
            children: "Logged Out"
        })
    })

The error message about React is odd, JSX and React are independent, why would React anything be needed to use JSX fragments? babel-preset-react with runtime: "automatic" loads jsx functions and the Fragment constant from a specified JSX runtime and does not rely on anything called React.

[iisaduan]

What JSX setting are you currently using in your tsconfig? The "requires React to be in scope" sounds like it could be hitting a default error message, so knowing your jsx setting would help me diagnose the issue

Since you are using a custom setup, the fix might be to specify jsxFactoryFragment: null as in #60122

[RobertSandiford]

@iisaduan

What JSX setting are you currently using in your tsconfig? The "requires React to be in scope" sounds like it could be hitting a default error message, so knowing your jsx setting would help me diagnose the issue

Since you are using a custom setup, the fix might be to specify jsxFactoryFragment: null as in #60122

It's just "jsx": "preserve" as the JSX transform is a post-tsc build step.

It seems to me that with "jsx": "preserve" TS should not care about any JSX factories (although there might be something I'm not aware of).

I've tried "jsxFragmentFactory": null, but it makes no difference.

Here is a new playground with "jsx": "preserve" set, this now matches what I see in my IDE: playground 2

Thanks

[RobertSandiford]

@iisaduan Thanks