Disable eslint error in jsx

Question

I have the below JSX in one of my react-native components

        <TouchableOpacity onPress={this.onEnableNotifications} style={{marginHorizontal: 10}}>
          <Image source={require('../../img/ic_warning.png')} style={{tintColor: colorThemes.Blue.red}}/>
        </TouchableOpacity>

I get the following ESLint error:

'require' is not defined. (no-undef)

I have tried adding line { // eslint-disable-line no-undef } after Image but that gives a parsing error. How can I get rid of this error just for that line.

Answer 1

On your .eslintrc file:

{
    "globals":{
        "require": true
    }
}

Answer 2

I've read there are some jsx quirks so try separating it out:

<TouchableOpacity onPress={this.onEnableNotifications} style={{marginHorizontal: 10}}>
  <Image
    source={require('../../img/ic_warning.png')} // eslint-disable-line no-undef
    style={{tintColor: colorThemes.Blue.red}}
  />
</TouchableOpacity>

Or you can define it above.

const warningImage = require('../../img/ic_warning.png'); // eslint-disable-line no-undef

....

<TouchableOpacity onPress={this.onEnableNotifications} style={{marginHorizontal: 10}}>
  <Image source={warningImage} style={{tintColor: colorThemes.Blue.red}}/>
</TouchableOpacity>

If this is a static path though, I would just define it outside the react class/function entirely, as an import.

Answer 3

In order to disable eslint warnings with comments inside jsx use

{ /* eslint-disable no-undef */ }
     <div>element causing warning </div>
{ /* eslint-enable no-undef */ }

A single line comment does not work:

{ /* eslint-disable-line no-undef */ }

Also see

https://github.com/eslint/eslint/issues/7030

Answer 4

To disable an eslint rule on an attribute, you can use an inline comment:

<StatusBar
  // eslint-disable-next-line react/style-prop-object
  style='light'
/>