no-use-before-define doesn't catch jsx

Tell us about your environment

I’ve only tried to reproduce this issue in the online demo. Roughly I changed source type to module, enabled jsx, and checked no-use-before-define. Here’s a link.

What parser (default, Babel-ESLint, etc.) are you using?

Default

Please show your full configuration:

Configuration

{
    "parserOptions": {
        "ecmaVersion": 5,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "constructor-super": 2,
        "for-direction": 2,
        "getter-return": 2,
        "no-case-declarations": 2,
        "no-class-assign": 2,
        "no-compare-neg-zero": 2,
        "no-cond-assign": 2,
        "no-console": 2,
        "no-const-assign": 2,
        "no-constant-condition": 2,
        "no-control-regex": 2,
        "no-debugger": 2,
        "no-delete-var": 2,
        "no-dupe-args": 2,
        "no-dupe-class-members": 2,
        "no-dupe-keys": 2,
        "no-duplicate-case": 2,
        "no-empty": 2,
        "no-empty-character-class": 2,
        "no-empty-pattern": 2,
        "no-ex-assign": 2,
        "no-extra-boolean-cast": 2,
        "no-extra-semi": 2,
        "no-fallthrough": 2,
        "no-func-assign": 2,
        "no-global-assign": 2,
        "no-inner-declarations": 2,
        "no-invalid-regexp": 2,
        "no-irregular-whitespace": 2,
        "no-mixed-spaces-and-tabs": 2,
        "no-new-symbol": 2,
        "no-obj-calls": 2,
        "no-octal": 2,
        "no-redeclare": 2,
        "no-regex-spaces": 2,
        "no-self-assign": 2,
        "no-sparse-arrays": 2,
        "no-this-before-super": 2,
        "no-undef": 2,
        "no-unexpected-multiline": 2,
        "no-unreachable": 2,
        "no-unsafe-finally": 2,
        "no-unsafe-negation": 2,
        "no-unused-labels": 2,
        "no-unused-vars": 2,
        "no-useless-escape": 2,
        "require-yield": 2,
        "use-isnan": 2,
        "valid-typeof": 2,
        "no-use-before-define": 2
    },
    "env": {}
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

import React, { Component } from 'react';

export const test_nowarn = <Test />;
export const test_warn = React.createElement(Test, null);

class Test extends Component {
}

What did you expect to happen?

no-use-before-define triggers on both the test_warn and test_nowarn lines.

What actually happened? Please include the actual, raw output from ESLint.

no-use-before-define triggers only on the test_warn line.

Are you willing to submit a pull request to fix this bug?

It would take a long time 😂

[not-an-aardvark]

I don’t think this is a bug in the no-use-before-define rule because no-use-before-define doesn’t understand the semantics of React (namely that <Foo /> corresponds to a usage of the variable named Foo). eslint-plugin-react uses the context.markVariableAsUsed API, which only affects no-unused-vars and doesn’t provide enough information to affect no-use-before-define. So this is less of a bug and more of an unsupported use case.

In theory I think this could be resolved by using a parser that provides custom scope analysis, although it would probably be easier to introduce a separate rule in eslint-plugin-react if this use case is important enough to warrant doing so.

[ljharb]

ping; open or closed, it’d still be great to get some direction from core on a way to make no-use-before-define able to apply to jsx.