Skip to content

eslint does not work with .jsx #443

@dcangulo

Description

@dcangulo

Description

Steps to reproduce:

  1. npx create-react-native-library@latest awesome-library
  2. cd awesome-library
  3. Rename example/src/App.tsx to example/src/App.jsx
  4. Modify example/src/App.jsx.
- const [result, setResult] = React.useState<number | undefined>();
+ const [result, setResult] = React.useState();
  1. Modify package.json
- "lint": "eslint \"**/*.{js,ts,tsx}\"",
+ "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
  1. Run yarn lint
MacBook-Pro:awesome-library davidangulo$ yarn lint
yarn run v1.22.19
$ eslint "**/*.{js,jsx,ts,tsx}"

/Users/davidangulo/Desktop/apps/awesome-library/example/src/App.jsx
  14:5  error  Parsing error: Unexpected token <

Expectations:

Should not throw an error.

Why this happens?

As mentioned in #432, this uses an old eslint config which does not have jsx defined so you have to manually add it.
https://github.com/facebook/react-native/blob/v0.71.12/packages/eslint-config-react-native-community/index.js#L37-L68

Where in the latest version jsx is defined.
https://github.com/facebook/react-native/blob/v0.72.0/packages/eslint-config-react-native-community/index.js#L52-L55

Temporary fix:

Add to eslintConfig

"overrides": [
  {
    "files": [
      "*.jsx"
    ],
   "parser": "@babel/eslint-parser"
  }
]

Permanent fix:

Migrate @react-native-community/eslint-config to @react-native/eslint-config.

Packages

  • create-react-native-library
  • react-native-builder-bob

Selected options

--

Link to repro

No response

Environment

--

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions