Incompatiibility with ESLint v5 AST

[sudo-suhas]

I originally faced issues when trying to use this plugin with typescripr-eslint-parser@v21.0.1 and reported it here - eslint/typescript-eslint-parser#572.

Copying over some of the relevant details:

What code were you trying to parse?

import React from 'react';
import { TextInput, View } from 'react-native';

export const Foo = () => (
    <View>
        <TextInput />
    </View>
);

What did you expect to happen?
No errors should be reported. The code if formatted by prettier.

What happened?

➜ ./node_modules/.bin/eslint ./components/t.tsx

{prj_path}/components/t.tsx
  5:11  error  Whitespace(s) cannot be used outside of a <Text> tag  react-native/no-raw-text
  6:22  error  Whitespace(s) cannot be used outside of a <Text> tag  react-native/no-raw-text

✖ 2 problems (2 errors, 0 warnings)

My eslint config:

env:
  node: true
  browser: true
  es6: true
  react-native/react-native: true
parser: typescript-eslint-parser
parserOptions:
  jsx: true
extends:
  - airbnb
  - prettier
plugins:
  - prettier
  - typescript
  - react-native
settings:
  import/parser:
    typescript-eslint-parser: [ .ts, .tsx ]
  import/resolver:
    typescript: {}
  import/extensions:
    - .js
    - .jsx
    - .ts
    - .tsx
rules:
  no-console: off
  no-undef: off
  no-unused-vars: off
  no-use-before-define: [ error, { functions: true, classes: true, variables: false }]
  lines-between-class-members: [ error, always, { exceptAfterSingleLine: true } ]
  quotes: [ warn, single, { avoidEscape: true } ]
  prettier/prettier: error
  import/prefer-default-export: off
  react/jsx-filename-extension:
    - error
    - extensions:
      - .js
      - .jsx
      - .tsx
  react/jsx-indent: off
  react/jsx-indent-props: off
  react/jsx-closing-tag-location: off
  react/jsx-one-expression-per-line: off
  react/destructuring-assignment: off
  react/sort-comp:
    - error
    - order:
      - static-methods
      - type-annotations
      - instance-variables
      - lifecycle
      - "/^on.+$/"
      - getters
      - setters
      - "/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/"
      - instance-methods
      - everything-else
      - rendering
      groups:
        lifecycle:
        - displayName
        - propTypes
        - contextTypes
        - childContextTypes
        - mixins
        - statics
        - defaultProps
        - constructor
        - getDefaultProps
        - getInitialState
        - state
        - getChildContext
        - componentWillMount
        - componentDidMount
        - componentWillReceiveProps
        - shouldComponentUpdate
        - componentWillUpdate
        - componentDidUpdate
        - componentWillUnmount
        rendering:
        - "/^render.+$/"
        - render
  # https://github.com/Intellicode/eslint-plugin-react-native#configuration
  react-native/no-unused-styles: error
  react-native/no-color-literals: error
  react-native/no-raw-text: [ error, { skip: [ RBText ] } ]
  # https://github.com/nzakas/eslint-plugin-typescript#supported-rules
  typescript/adjacent-overload-signatures: error
  typescript/class-name-casing: error
  typescript/member-ordering: error
  typescript/no-angle-bracket-type-assertion: error
  typescript/no-array-constructor: error
  typescript/no-empty-interface: error
  typescript/no-inferrable-types: error
  typescript/no-namespace: [ error, { allowDefinitionFiles: true } ]
  typescript/no-parameter-properties: error
  typescript/no-triple-slash-reference: error
  typescript/no-unused-vars: error
  typescript/no-var-requires: error
  typescript/prefer-namespace-keyword: error

@mysticatea helped to identify that the source of the issue was incompatibility of this plugin with ESLint v5 AST.

Could you please update the plugin to work with the newer AST syntax?

[AleksandrZhukov]

Not sure that it is related to ESLint v5, this project has almost the latest versions of ESLint. Also I tried to update to the latest one (^5.15.1) but still can't reproduce the issue.

Maybe it is typescript related issue?

[sudo-suhas]

Here's the minimal package which demonstrates the issue:

test-eslint-plugin-react-native.zip

Unzip, install modules and run ./node_modules/.bin/eslint T.tsx to see the issue:

➜ ./node_modules/.bin/eslint T.tsx

/Users/suhas.karanth/dev/playground/test-eslint-plugin-react-native/T.tsx
  5:11  error  Whitespace(s) cannot be used outside of a <Text> tag  react-native/no-raw-text
  6:22  error  Whitespace(s) cannot be used outside of a <Text> tag  react-native/no-raw-text

✖ 2 problems (2 errors, 0 warnings)

[AleksandrZhukov]

@sudo-suhas here is the fix #220