no-unused-vars, no-undef errors in simple ES6 class / react example

[chmanie]

index_es6.js (using the react 0.13 syntax)

'use strict';

import React from 'react';

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

React.render(<HelloMessage name="Sebastian" />, document.body);

eslint output (using eslint-babel):

index_es6.js
   5:6   error  HelloMessage is defined but never used  no-unused-vars
  11:14  error  'HelloMessage' is not defined           no-undef

index_es5.js

'use strict';

var React = require('react');

var HelloMessage = React.createClass({
    render: function () {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<HelloMessage name="Sebastian" />, document.body);

eslint output (using eslint-babel):

src/app/index_old.js
  11:14  error  'HelloMessage' is not defined  no-undef

Is this an issue or am I doing something stupid here?

[RnbWd]

I'm getting that error for all classes

[RnbWd]

specifically classes are "defined but never used" warning is coming up

[WRidder]

+1 Got the same errors regarding "defined but never used"

[megamaddu]

Also having this problem. I have a module that exports a class (export default class SomeClass) and a utility module that individually exports named functions (export function someHelper...). It doesn't like either one.

[gaearon]

This seems to dupe #8.

[sebmck]

Can you please verify that this issue still exists on 3.0.1?

[jerrysu]

I'm still seeing this with babel-eslint@3.0.1.

However, when using eslint-plugin-react with babel-eslint, I don't have these issues any longer.

[mridgway]

Confirmed still seeing this issue with [email protected] and [email protected].

[cemckinley]

I am also seeing this issue with [email protected] and [email protected]. Looks like this also came up before with eslint but was fixed there: eslint/eslint#1534

[grahamb]

Similar to @cemckinley, I'm seeing this with [email protected] and [email protected].

'use strict';

import React from 'react';
import Router from 'react-router';
import CreateSpace from 'apps/CreateSpace';
import MySpaces from 'apps/MySpaces';
import SpaceDirectory from 'apps/SpaceDirectory';

const { Route, NotFoundRoute, DefaultRoute, Link, RouteHandler } = Router;

if (__DEV__) {
  require('../scss/dev.scss');
}

const App = React.createClass({
  render() {
    return (
      <RouteHandler />
    );
  }
});

const NotFound = React.createClass({
  render() {
    const divstyle = {
      textAlign: 'center',
      paddingTop: '35px'
    };

    const imgstyle = {
      width: '25%'
    };

    return (
      <div style={divstyle}>
        <img style={imgstyle} src="/images/sadpanda.svg" alt="The panda is sad because it couldn't find the page you wanted" />
        <h2>Page Not Found</h2>
        <p>Oops, we couldn't find that page.</p>
      </div>
    );
  }
});

const route_base_path = __DEV__ ? '/' : '/canvasspaces';
const routes = (
  <Route name="app" path={route_base_path} handler={App}>
    <Route name="create_space" handler={CreateSpace} />
    <Route name="my_spaces" handler={MySpaces} />
    <Route name="space_directory" handler={SpaceDirectory} />
    <DefaultRoute handler={MySpaces} />
    <NotFoundRoute handler={NotFound}/>
  </Route>
);

Router.run(routes, Router.HistoryLocation, (Handler) => {
  React.render(<Handler/>, document.getElementById('CanvasSpacesApp'));
});

export default App;

   9:8   error  Route is defined but never used          no-unused-vars
   9:15  error  NotFoundRoute is defined but never used  no-unused-vars
   9:30  error  DefaultRoute is defined but never used   no-unused-vars
   9:44  error  Link is defined but never used           no-unused-vars
   9:50  error  RouteHandler is defined but never used   no-unused-vars
  55:44  error  Handler is defined but never used        no-unused-vars

✖ 6 problems (6 errors, 0 warnings)

My .eslintrc file:

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "globals": {
    "__DEV__": true
  },
  "rules": {
    "quotes": [2, "single"],
    "eol-last": [1],
    "no-mixed-requires": [0],
    "no-underscore-dangle": [0],
    "camelcase": [0]
  }
}

[RnbWd]

However, when using eslint-plugin-react with babel-eslint, I don't have these issues any longer.

eh? is that a solution? I stopped noticing the errors when I included the react-plugin, but haven't worked on anything this week.

[sebmck]

Yup, it's the solution. Use the eslint-plugin-react rules if you're using JSX. It can't really be fixed on the babel-eslint side.

[lolsborn]

It seems the eslint react plugin fixes this error, but it exists outside of react projects.

Something as simple as

class Item {
  constructor() {
    this.id = 0;
  }
}

Will produce this error, it doesn't have to extend a React component. Pulling in the eslint react plugin to solve the issue when I'm not using react seems like a lazy work around.

[hzoo]

Can you reproduce with the regular parser, maybe an eslint issue. But, if you export the class it should be fixed.

[tjwebb]

I'm running into this issue with a regular ES6 class.

[jesusreal]

Yes, me too. I am using the class only in the ReactDOM.render() method. I wonder if this bug was reintroduced in the last upgrade. For the time being I had to disable the "no-unused-vars" rule.

[danez]

Can one of you please open a new bug with an example and the according eslintrc file. Thanks.

[jesusreal]

Hi, sorry for not answering before, I will do it :)

[jesusreal]

I investigated the bug and it seems to be an eslint issue. I still have the same problem if I use:
parserOptions: { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true } },
instead of:
parser: 'babel-eslint',

[jesusreal]

In case it can help someone, my issue was resolved here: eslint/eslint#6303