Eslint-plugin-react: No errors shown when having undefined components

[nickjanssen]

An error should be shown that Text is undefined.

To reproduce:

import React from 'react'

import { View } from 'react-native'

export default class Root extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello!</Text>
      </View>
    )
  }
}

Rules:

{
  "extends": "plugin:react/recommended",
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "plugins": [
    "react",
    "babel"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  }
}

[nickjanssen]

Actually I've encountered more strange behaviour, unless I'm missing something:

[ljharb]

I believe lowercased components are just treated as HTML element tag strings - ie, no error is expected there.

[lencioni]

This is happening because Text is a global in the browser environment.

Here's the data that ESLint uses to set up the globals for the environments: https://developer.mozilla.org/en-US/docs/Web/API/Text

And here's more information on the Text API: https://developer.mozilla.org/en-US/docs/Web/API/Text

[yannickcr]

Yep, It's an edge case an there is nothing we can do to fix this.