React: Can't use React.Fragment

[ha404]

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

[TrySound]

@ha404 Check your node_modules and make sure you have react 16.2

[gaearon]

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

[ha404]

Both are at ^16.2.0 :(

[gaearon]

Can you reproduce this in a fiddle? If not there might be some kind of local cache on your system that’s messing this up. Please provide a reproducing project.

[ha404]

Let me try to reproduce it somewhere. Here's another clue when I use the <></> syntax:

[ha404]

@gaearon https://codesandbox.io/s/0pvzqryz2l. It just seems to not like this fragments syntax.

[gaearon]

As mentioned in the blog post, the syntax support is not expected to come to all tools soon.
You'll need to wait.

That seems irrelevant to the problem you were describing in the initial post though.

[ha404]

Understandable, I just can't understand why I'm getting similar errors. Is there anything else I need other than react and react-dom on 16.2.0?

[ha404]

@gaearon it looks related to this https://github.com/facebook/react/issues/11759

[gaearon]

@ha404 No, that one is IE11-specific.

Is there anything else I need other than react and react-dom on 16.2.0?

No. How did you verify that you have them? Can you post the content of node_modules/react/package.json and node_modules/react-dom/package.json please?

[ha404]

@gaearon that was the second thing I tried looking at haha, here ya go:

node_modules/react-dom/package.json:

{
  "name": "react-dom",
  "version": "16.2.0",
  "description": "React package for working with the DOM.",
  "main": "index.js",
  "repository": "facebook/react",
  "keywords": [
    "react"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/facebook/react/issues"
  },
  "homepage": "https://reactjs.org/",
  "dependencies": {
    "fbjs": "^0.8.16",
    "loose-envify": "^1.1.0",
    "object-assign": "^4.1.1",
    "prop-types": "^15.6.0"
  },
  "peerDependencies": {
    "react": "^16.0.0"
  },
  "files": [
    "LICENSE",
    "README.md",
    "index.js",
    "server.js",
    "server.browser.js",
    "server.node.js",
    "test-utils.js",
    "unstable-native-dependencies.js",
    "cjs/",
    "umd/"
  ],
  "browser": {
    "./server.js": "./server.browser.js"
  },
  "browserify": {
    "transform": [
      "loose-envify"
    ]
  }
}

node_modules/react/package.json:

{
  "name": "react",
  "description": "React is a JavaScript library for building user interfaces.",
  "keywords": [
    "react"
  ],
  "version": "16.2.0",
  "homepage": "https://reactjs.org/",
  "bugs": "https://github.com/facebook/react/issues",
  "license": "MIT",
  "files": [
    "LICENSE",
    "README.md",
    "index.js",
    "cjs/",
    "umd/"
  ],
  "main": "index.js",
  "repository": "facebook/react",
  "engines": {
    "node": ">=0.10.0"
  },
  "dependencies": {
    "fbjs": "^0.8.16",
    "loose-envify": "^1.1.0",
    "object-assign": "^4.1.1",
    "prop-types": "^15.6.0"
  },
  "browserify": {
    "transform": [
      "loose-envify"
    ]
  }
}

[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.

[andrastothtw]

Maybe a nice package-lock.json problem where you _think_ you have React 16.2 but in reality you are still using 16.0?

[ha404]

@andrastothtw I found out an older version of React was being included externally and aliased in webpack D:

[THPubs]

For people who still have the problem even though you did not find an older version, try removing the node_modules folder and installing the packages again through yarn install or npm install.

[TrySound]

@mikael1000 the message is clear I think

or you might have mixed up default and named imports

Use import * as React from 'react'

[TrySound]

What do you mean by this?

Now it complains directly on the tag

[mikael1000]

@TrySound

Of course I made a stupid error. This is for bug reports and maybe I should know more about React before making bug reports. I should have asked for help somewhere instead. I cleared out my comments so people don't think about what I wrote. Sorry for taking unnecessary time and space. And thank you @TrySound for the answers.

[dotku]

I think we should deprecated React.Fragment maybe, since it might be slow (by smart detecting parent and child and render the proper tags).

btw, it doesn't support

eg.

<table>
<React.Fragment>
  <th>header A</th>
  <th>header B</th>
  <th>header C</th>
</React.Fragment>
</table>

would rendered as

<table>
  <th>header A</th>
  <th>header B</th>
  <th>header C</th>
</table>

[aximili]

@TrySound

Of course I made a stupid error. This is for bug reports and maybe I should know more about React before making bug reports. I should have asked for help somewhere instead. I cleared out my comments so people don't think about what I wrote. Sorry for taking unnecessary time and space. And thank you @TrySound for the answers.

Hi mikael1000 (or @TrySound), would you be able to tell us what was the issue? We are having the exact same problem with React 16.7.0

[TrySound]

@aximili Make sure you have the right version in your node_modules. It could be resolved incorrect. Also make sure your dependencies does not have different react version. React and react-dom packages usually should be in peer dependencies of libraries. Another way to solve the problem is force react version with yarn resolutions.

[aximili]

Thx so much @TrySound
We tried deleting node_modules and 'npm install' again. Yes it has the correct versions. (We never used yarn though)

It is only affecting this particular React project with TypeScript, we must be missing something. How do you check for the dependencies issue that you mentioned?

This is what's in our package.json
"devDependencies": {
"@babel/preset-typescript": "^7.1.0",
"@types/node": "^8.10.39",
"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"mobx-react-devtools": "^6.0.3",
"source-map-loader": "^0.2.4",
"ts-loader": "^5.3.3",
"typescript": "^3.2.4"
},
"dependencies": {
"@types/lodash": "^4.14.120",
"@types/react": "^16.7.0",
"@types/react-dom": "^16.7.0",
"csstype": "^2.6.0",
"express": "^4.16.4",
"path": "^0.12.7",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1"
}

[TrySound]

I'm looking at node_modules folder and check all react dependencies