ReferenceError: Fragment is not defined

[rpelorosso]

Hi!

I created a new library, and made a quick edit to add a fragment to the example code. The new code is:

export const ExampleComponent = ({ text }) => {
   return (<><p>test</p><div className={styles.test}>Example Component: {text}</div></>)
}

When running this I get the error from the title:

ReferenceError: Fragment is not defined
ExampleComponent
src/index.js:5

Is there any way to add support for it?

Thank you !

[ibelick]

Hello,
You need to import Fragment with
import React, { Fragment } from "react"

[rpelorosso]

Thank you! Yes, in fact I ended up replacing <> with <React.Fragment>. Closing this now.

[jnachtigall]

As far as I remember <> shortcuts are supported out of the box in CRA via a babel extensions (that is built-in in CRA), so I also found it surprising it is not in CRL.

[transitive-bullshit]

Would love to add this functionality.

[saborrie]

@transitive-bullshit you can add this by changing the scripts in the package.json to include --jsxFragment React.Fragment

e.g.

"build": "microbundle-crl --no-compress --format modern,cjs --jsxFragment React.Fragment",
"start": "microbundle-crl watch --no-compress --format modern,cjs --jsxFragment React.Fragment",

[jnachtigall]

@saborrie why not sending a Pull Request ;-)

[saborrie]

@jnachtigall Yes, I can do.

It might not have been clear that my comment already applies to users of this project - a pull request would be to change the template, but you can still make that modification yourself after setting up.