Babel-eslint: 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: https://github.com/eslint/eslint/issues/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:

• [email protected]
• [email protected]

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 [email protected] project, which has the dependency @babel/[email protected]. 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 https://github.com/eslint/eslint/issues/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.