Eslint-plugin-react: no-undef mark JSX elements as not defined

[BerkeleyTrue]

With

var React =require('react'),
    Router = require('react-router'),
    Route = Router.Route,
    DefaultRoute = Router.DefaultRoute;

at the top and using [email protected] and [email protected] with
"react/jsx-uses-react": 1, "react/jsx-uses-vars": 1

This works fine.

var routes = React.createClass({
  render: function() {
    return (
      <Route
        name='app'
        path='/'
        handler={ App }>

        <Route
          name='bonfires'
          path='/bonfires/?:bonfires?'
          handler={ Bonfires } />

        <DefaultRoute
          handler={ Bonfires } />
      </Route>
    );
  }
});

But this barphs all over the place

var routes = (
  <Route 
    name='app'
    path='/'
    handler={ App }>

    <Route
      name='bonfires'
      path='/bonfires/?:bonfires?'
      handler={ Bonfires } />

    <DefaultRoute
      handler={ Bonfires } />
  </Route>
);

[yannickcr]

Are you using the globalReturn or modules feature ? There is an issue in ESLint related to variable used in global scope with these features

I described the issue here eslint/eslint#2040

[BerkeleyTrue]

Here is the eslintrc file we are using. We are not using either of those, although we will need modules soon.

[yannickcr]

Using the node environment set globalReturn to true https://github.com/eslint/eslint/blob/master/conf/environments.js#L17-L19 so your issue seems related.

You can force globalReturn to false by adding:

"ecmaFeatures": {
    "globalReturn": false
}

But this is just a workaround for now. Hope this issue will be resolved soon.

[BerkeleyTrue]

Yup that workaround works. I'll keep an eye on the issue in eslint use this workaround for now. Should this issue be closed since this an eslint bug?

[Cellule]

I tried the workaround and it didn't work for me.
However, I see that wrapping the jsx in a function seems to fix the problem.
for instance

var routes = (function(){
  return <Route 
    name='app'
    path='/'
    handler={ App }>

    <Route
      name='bonfires'
      path='/bonfires/?:bonfires?'
      handler={ Bonfires } />

    <DefaultRoute
      handler={ Bonfires } />
  </Route>
})();

is correctly recognised by the linter.
It seems that any jsx not in a function is incorrect

[ericclemmons]

@Cellule's fix worked for me as well. Thanks!

[yannickcr]

I think the problem occur only on variables used in global scope.

[ericclemmons]

I'm not sure what's considered "global scope", but the OP's example (where you use <Route />) is all it took for me.

[Cellule]

I also saw the problem elsewhere (not really a normal use case) and it might pinpoint the issue.

var Panel = require("react-bootstrap/Panel");
var Application = React.createClass({
  statics: {
    componentX: (
      <Panel> <p> test </p> </Panel>
    )
  },

I get the errors

   4:4   error    Panel is defined but never used          no-unused-vars
  22:6   warning  'React' must be in scope when using JSX  react/react-in-jsx-scope
  22:7   error    'Panel' is not defined                   no-undef
  22:14  warning  'React' must be in scope when using JSX  react/react-in-jsx-scope

However

var Panel = require("react-bootstrap/Panel");
var Application = React.createClass({
  statics: {
    getComponentX: function() {
      return (
        <Panel> <p> test </p> </Panel>
      );
    }
  },
});

is fine

[yannickcr]

Fix submited to ESLint eslint/eslint/pull/2090

[JedWatson]

I just came across this in the current published version (1.5.0 with eslint 0.17.1) - haven't had a chance to test against the PR submitted to ESLint yet but thought I'd leave this here for reference.

I get an odd result listing react-tappable

With the following config:

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "node": true
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "curly": [2, "multi-line"],
        "no-shadow": 0,
        "no-underscore-dangle": 0,
        "no-unused-expressions": 0,
        "quotes": [2, "single", "avoid-escape"],
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/react-in-jsx-scope": 1,
        "semi": 2,
        "strict": 0
    }
}

I get the following results:

example/src/app.js
   4:4   error     App is defined but never used           no-unused-vars
  67:13  warning  'React' must be in scope when using JSX  react/react-in-jsx-scope
  67:14  error    'App' is not defined                     no-undef

3 problems (2 errors, 1 warning)

It's kind of ironic that it throws both the App is defined but never used and App is not defined issues; also React _is_ in scope at the top of the file.

[yannickcr]

Will be fixed when eslint/eslint#2121 (for no-unused-vars) and eslint/eslint#2122 (for no-undef) gets merged.

[JedWatson]

:+1: great, thanks!

[BerkeleyTrue]

:+1: Woot!

[BerkeleyTrue]

Looks like both of these have been merge. Will wait to test next release of eslint to close this.

[yannickcr]

Fixed in ESLint 0.18.0

[r01010010]

adding these rules fixed it for me:

"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1