React 16.2 fragment syntax triggers

[remcohaszing]

Reacr 16.2 introduced fragments. This feature is accompanied by a syntactic sugar. The following component is now valid in React:

import React from 'react';


export default () => (
  <>
    <div />
  </>
)

When using the default ESLint parser, this causes a syntax error.
When using the babel-eslint parser, this triggers the quotes rule.

[sscaff1]

Any updates on this? I'm using the following versions:
"babel-eslint": "^8.0.2",
"eslint": "^4.10.0",
"eslint-plugin-react": "^7.5.1",

[jacobp100]

As a workaround, you can use <React.Fragment>...</React.Fragment>

[mattiascaricato]

+1

[ThaJay]

Of course we can use Fragment component but that is not the point here. We want to use fragment shorthand. https://reactjs.org/docs/react-api.html#reactfragment

I have checked the instructions here:
https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html#eslint

$ eslint -v
v4.17.0
$ cat package.json | grep babel-eslint
    "babel-eslint": "^8.2.1",

also this for reference: eslint/eslint#9662 (still has blocked label)

[jimmybrawn]

Maybe you can use a workaround like, create a component named "f" and make it import fragment from react and pass down its prop children. This way you can use not sure if this will work

[jimmybrawn]

Maybe you can use a workaround like, create a component named "f" and make it import fragment from react and pass down its prop children. This way you can use <f></f> not sure if this will work

[jimmybrawn]

Or you can just import fragment under the same "f" and alias 😂

[fabiomcosta]

Note: Fragment is only working for babel-eslint@^8, v7 doesn't support that, as wrongly stated on the React Fragment blog post.
eslint can be any bigger than 3
https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html#eslint

[graingert]

@fabiomcosta nope that still triggers the quotes rule

[ReeganExE]

"babel-eslint": "^8.2.2",
"eslint": "^4.19.1"

The latest ones still have quotes error.

[existentialism]

Just an update, this issue isn't with babel-eslint itself, as there isn't really anything we need to do related to parsing, the quotes rule itself doesn't know how to handle JSXFragment node types.

Until it get updated in ESLint proper (can track via the linked thread above), I've added a new quotes rule in eslint-plugin-babel that won't trip on JSX shorthand syntax.

[hzoo]

Published with https://github.com/babel/eslint-plugin-babel/releases/tag/v5.0.0

It has a peerDep on ESLint 4.

Thanks all! FYI still looking for contributors on this repo and eslint-plugin-babel. I'm happy to help mentor or get people involved.

Or as always can also help out out team on the Open Collective

[brneto]

"babel-eslint": "^8.2.2", "eslint": "^4.19.1", "eslint-plugin-babel": "^5.0.0"

I'm using that versions above, but still showing the error:
ERROR in ./src/client/index.js Module build failed: Thread Loader (Worker 0) SyntaxError: Unexpected token (16:3)

[existentialism]

@brneto that is a different error, can you create another issue with your config/code? better yet, a small repo that reproduces the problem?

[brneto]

Forget it, I fixed the problem! It had nothing to do with babel-eslint. It had to do with babel itself. I was using babel v6. When I've updated to v7 plus others configurations, worked!

Anyway thanks for the help!

[jaydenseric]

Still getting the Strings must use singlequote error with:

• eslint@5.0.0
• babel-eslint@8.2.5

Finding it very difficult to debug why.

[jaydenseric]

@jimmybrawn

did u try with babel 9

I think you meant Babel v7 beta?

It's a next@6.0.4-canary.8 project, which has the dependency @babel/core@7.0.0-beta.42. I tried manually adding the latest Babel v7 beta to my project dependencies, but it didn't help.

[yuritoledo]

any update?

[st-zelenin]

not reproduced with:

"babel-eslint": "~10.0.1",
"eslint": "~5.11.1",

[yuritoledo]

the package that comes with Create React App, react-app, fix it.

[johnnyshankman]

Issue is still present for me.

"@babel/core": "^7.2.2",
...
"babel-eslint": "^10.0.1",
...
"eslint": "^5.13.0",

Until it get updated in ESLint proper

@existentialism I don't think this is the case anymore since ESLint 5 released but I'm not 100% sure. Seems like it from this discussion eslint/eslint#9662

Update: Jumped the gun. Turns out gulp-eslint was the culprit. Updating from ^3.0.0 to ^5.0.0 fixed it. 👍 nvm! Leaving this here in case anyone else runs into that extremely specific issue.