Bun 1.1.28 -> ReferenceError: Can't find variable: Fragment

[aralroca]

What version of Bun is running?

1.1.28+cf4e9cb69

What platform is your computer?

Darwin 23.6.0 arm64 arm

What steps can reproduce the bug?

In the new version of Bun, it doesn't detect the Fragment variable even if I have it in an import directly from JSX-runtime.

What is the expected behavior?

That it uses correctly the direct fragment of the import. It crashes in the test and also in build who uses this component that has this import, for something the build is not done well.

import { Fragment } from '@/jsx-runtime';

// This now shows an error:
return <Fragment>foo</Fragment>

What do you see instead?

I see this error:

 97 |         >
 98 |           {content}
 99 |           {style.length > 0 && <style>{toInline(style)}</style>}
100 |         </template>
101 |       )}
102 |       <Fragment slot="">{props.children}</Fragment>
                                                ^
ReferenceError: Can't find variable: Fragment

Additional information

https://github.com/user-attachments/assets/e4ad8643-bfbf-4f94-b414-166ffa3bbd4f

In this video is better to see the error.

[aralroca]

@paperdave I sent you an invitation to the repo, to reproduce it just bun test packages/brisa/src/utils/ssr-web-component/index.test.tsx.

[EvHaus]

I'm also running into this but with import {Fragment} from 'react'

[byteio]

Experiencing the same issue. I'm guessing that bun is messing around with the specific identifier Fragment in a JSX context because I'm able to replicate the issue with any component named Fragment even if it's an aliased import of an arbitrary component.

e.g.

// ./frag.ts
export const Frag = (props) => <span>{props.children}</span>;

// ./index.ts
import { renderToString } from "react-dom/server";
import { Frag as Fragment } from "./frag";
console.log(renderToString(<Fragment>hello</Fragment>));

/*
ReferenceError: Can't find variable: Fragment
      at /home/lstanley/projects/fragerr/index.tsx:3:45

Bun v1.1.29 (Linux x64)
*/

Work Around:

You can get passed it by aliasing Fragment to something else, or just using the react fragment short-hand <>stuff</> if you don't need to apply any props.

import { Fragment as Frag } from "react";
import { renderToString } from "react-dom/server";
console.log(renderToString(<Frag>hello</Frag>)); // prints "hello"

[al6x]

Have same problem, after recent update code won't compile anymore

import { h, Fragment } from './el'

<>hi</>

This bug is critical is the server rendering JSX templates doesn't work anymore.

[aralroca]

I hope @paperdave priortize this high regression