Can't use React.Fragment

Do you want to request a feature or report a bug? bug

What is the current behavior? broken in runtime

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

1. Use <React.Fragment></React.Fragment> or <></> syntax to render mapped fragments.

export default enhance(({
  products,
}) => (
  <table>
    <thead>
      <tr>
        <th>Product ID</th>
        <th>Shoe Name</th>
        <th>Sale Status</th>
        <th>List Price</th>
      </tr>
    </thead>
    <tbody>
      {products.map(product => (
        <React.Fragment>
          <tr>
            <td>{product.id}</td>
            <td>{product.name}</td>
            <td>{product.sale_status}</td>
            <td>${product.price_cents / 100}</td>
          </tr>
          <tr>
            <td colSpan="4">testing</td>
          </tr>
        </React.Fragment>
      ))}
    </tbody>
  </table>
))

1. Try to render the component.
2. Get met with this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Unknown`.

What is the expected behavior? I expect the component to render. It works fine when rendering as an array (I just don’t want to type a comma between my elements). It also works fine if I use a <div> but that’s not semantically correct.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• React v16.2.0
• Chrome Version 63.0.3239.132 (Official Build) (64-bit)
• Mac 10.12.6

[gaearon]

Maybe you have an older react-dom? Both need to be 16.2.0+.

[gaearon]

OK, my best guess is you accidentally have two React’s in the bundle, one being an older version.

Try running npm ls react or inspect your Sources in Chrome DevTools and look how many files called react.development.js show up.

I don’t think we can help further here—if it doesn’t reproduce on a new project, it’s definitely an issue with how your project is set up. You either have two Reacts or have some aggressive caching turned on and accidentally work with an older version.