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.
On your .eslintrc file:
{
"globals":{
"require": true
}
}
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.
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