Eslint-plugin-react: Getting no-unused-vars for "render" and imported components

[afholderman]

I've installed eslint and eslint-plugin-react. During eslint --init I said yes that I am using React and have the following .eslintrc file:
module.exports = { "env": { "browser": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "indent": [ "error", 4 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "single" ], "semi": [ "error", "always" ] } };

I'm using Webpack with the following config:

const path = require('path');
const resolve = require('./resolve');
const htmlWebpackPlugin = require('html-webpack-plugin');
const styleLintPlugin = require('stylelint-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");

const plugins = [
  new htmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
  }),
  new styleLintPlugin(),
  new extractTextPlugin({
      filename: 'style.css',
  })
];

module.exports = {
  entry:'./app/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    port: 9610
  },
  devtool: 'source-map',
  resolve,
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        "react-hot-loader",
        "babel-loader",
        "eslint-loader",
        ]
      },
      {
        test: /\.scss$/,
        use: extractTextPlugin.extract({
          use: [{
            loader: "css-loader"
          }, {
            loader: "sass-loader"
          }],
          fallback: "style-loader"
        })
      }
    ]
  },
  plugins
}

I get the errors for "render" and the Button component on this file which is named Home.js:

import React, { PropTypes } from 'react';
import { render } from 'react-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as testActions from 'Actions/testActions';
import Button from 'Container/Button';

class Home extends React.Component {
  constructor(props, context){
    super(props, context);
    this.state = {
      test: false
    }
    this.onClick = this.onClick.bind(this);
  }

  onClick(){
    this.setState({test: !this.state.test})
    this.props.actions.testSuccess(this.state.test);
  }

  render() {
    return (
      <div>
        <Button onClick={this.onClick} />
      </div>
    )
  }
}

Home.PropTypes = {
  actions: PropTypes.object.isRequired,
  courses: PropTypes.array.isRequired
}

function mapStateToProps(state, ownProps){
  return {
    test: state.test
  };
}

function mapDispatchToProps(dispatch){
  return {
    actions: bindActionCreators(testActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

From what I can tell in the docs I should be set up correctly. Is there something I'm missing?

[ljharb]

Can you provide the exact linting errors you're getting?

[afholderman]

Sure, they are:

2:10  error  'render' is defined but never used            no-unused-vars
6:8   error  'Button' is defined but never used            no-unused-vars

[ljharb]

My guess is if you fix the real error on line 2, the false error on line 6 will disappear.

[afholderman]

I'm not sure I follow how line 2 is an error. I import the function in 2 then call it in what is line 22 of the file, inside the Home class declaration.

[ljharb]

That isn't calling anything; that's defining a method named "render" on your class, which React calls for you. You don't need to import a render method.

[afholderman]

Removing that line did not solve the Button component import issue.

[ljharb]

K, one more confirmation - if you name Button as anything else - specifically, something that if lowercase wouldn't be an HTML tag name - do you still get the error?

If not, it should be a straightforward bug for us to fix :-)

[afholderman]

I'm getting the error on all my component imports, just highlighted that one since it included the render one as well. Here's another example:

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from 'Store/configureStore';
import Home from 'Presentation/Home';
import Display from 'Presentation/Display';

const store = configureStore();

const App = () => (
  <Provider store={ store }>
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/display">Display</Link></li>
        </ul>
        <Route exact path="/" component={Home} />
        <Route path="/display" component={Display} />
      </div>
    </Router>
  </Provider>
);

export default App;

and it throws the errors:

  1:8   error  'React' is defined but never used     no-unused-vars
  3:20  error  'Router' is defined but never used    no-unused-vars
  4:3   error  'Route' is defined but never used     no-unused-vars
  5:3   error  'Link' is defined but never used      no-unused-vars
  7:10  error  'Provider' is defined but never used  no-unused-vars

[yannickcr]

Looking at your .eslintrc file it seems you do not have enabled any rules in eslint-plugin-react.
To solve your errors you must enable the jsx-uses-vars and jsx-uses-react rules. That way ESLint will correctly mark your variables as used.

You can also use the recommended configuration.

[afholderman]

That was the solve, thank you. Please close as you see fit.

[johnsoncherian]

does removing un used imports have any impact on building and package size of create react apps ?

[ljharb]

It would have impact on bundle size for any app, including CRA - although treeshaking may mitigate that a bit.