Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BUG react/function-component-definition auto fix break the code. #3207

Closed
nathanredblur opened this issue Feb 17, 2022 · 3 comments
Closed
Labels

Comments

@nathanredblur
Copy link

nathanredblur commented Feb 17, 2022

when you try to use eslint --fix to solve the issue related to the rule react/function-component-definition in certain scenarios break the code.

this is the way to reproduce.

having this file

const genX = (symbol) => `the symbol is ${symbol}`;

const IndexPage = () => {
  return (
    <div>
      Hello World.{genX('$')}
    </div>
  )
}

export default IndexPage;

and this eslint config

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ["plugin:react/recommended"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["react"],
  rules: {
    "react/function-component-definition": "error",
    "react/react-in-jsx-scope": "off"
  }
};

you have this output in eslint

/sandbox/pages/index.js
  3:19  error  Function component is not a function declaration  react/function-component-definition

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

and on try to fixe the issue with eslint --fix

your final code is this

const genX = (symbol) => `the symbol is ${symbol}`;

function IndexPage() {
  return (
    <div>
      Hello World.{genX(')}
    </div>
  )
}

export default IndexPage;

the desired result should be

const genX = (symbol) => `the symbol is ${symbol}`;

function IndexPage() {
  return (
    <div>
      Hello World.{genX('$')}
    </div>
  )
}

export default IndexPage;

tested in this sandbox https://codesandbox.io/s/red-smoke-bh8tjw?file=/pages/index.js

@ljharb
Copy link
Member

ljharb commented Feb 17, 2022

Thanks! Fix incoming.

@ljharb ljharb closed this as completed in 6255ca6 Feb 17, 2022
@ljharb ljharb added the bug label Feb 17, 2022
@romanown

This comment was marked as resolved.

@ljharb

This comment was marked as resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

3 participants