Eslint-plugin-react: 'Fragment' is not defined

Created on 2 Dec 2017  路  3Comments  路  Source: yannickcr/eslint-plugin-react

package.json

"babel-core": "^6.26.0",
"babel-preset-react": "^6.24.1",
"eslint": "4.12.1",
"eslint-plugin-react": "^7.5.1",
"babel-eslint": "^8.0.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",

In code

return (
    <Fragment>
           ... code
    </Fragment>
);

here is the error:
Error:(9, 10) ESLint: 'Fragment' is not defined. (react/jsx-no-undef)

question

Most helpful comment

It wouldn't be. React.Fragment exists in v16.2, but not Fragment.

All 3 comments

It wouldn't be. React.Fragment exists in v16.2, but not Fragment.

Thanks for reply.

But what about this syntax?

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

That should work fine (it transpiles to React.Fragment) but babel 7 beta is required to parse it; which means you'll need babel-eslint.

Was this page helpful?
0 / 5 - 0 ratings