Eslint with react css modules

Question

I'm trying to add React CSS Modules to my project, but I'm running into problems with eslint. My login view looks like this:

import React, { PropTypes as T } from 'react';
import {ButtonToolbar, Button} from 'react-bootstrap';
import Messages from '../Messages/Messages';
import AuthService from '../../utils/AuthService';
import CSSModules from 'react-css-modules';
import styles from './styles.module.css';

class Login extends React.Component {

    render() {

        let rootStyle = {
            textAlign: 'center'
        };

        let toolbarStyle = {
            display: 'inline-block'
        };

        const { auth } = this.props;

        return (
            <div styleName="root">
                <h2>Login</h2>
                <Messages auth={this.props.auth}></Messages>
                <ButtonToolbar styleName="toolbar">
                    <Button bsStyle="primary" onClick={auth.login.bind(this)}>Login</Button>
                </ButtonToolbar>
            </div>
        );
    }
}

Login.PropTypes = {
    location: T.object,
    auth: T.instanceOf(AuthService)
};

export default CSSModules(Login, styles);

And here is my original .eslintrc file, before adding an import/ignore setting:

{
   "extends": [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:import/warnings"
   ],
   "plugins": [
      "react"
   ],
   "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
         "jsx": true,
         "experimentalObjectRestSpread": true
      }
   },
   "env": {
      "es6": true,
      "browser": true,
      "node": true,
      "jquery": true,
      "mocha": true
   },
   "rules": {
      "quotes": 0,
      "no-console": 1,
      "no-debugger": 1,
      "no-var": 1,
      "semi": [1, "always"],
      "no-trailing-spaces": 0,
      "eol-last": 0,
      "no-unused-vars": 0,
      "no-underscore-dangle": 0,
      "no-alert": 0,
      "no-lone-blocks": 0,
      "jsx-quotes": 1,
      "react/display-name": [ 1, {"ignoreTranspilerName": false }],
      "react/forbid-prop-types": [1, {"forbid": ["any"]}],
      "react/jsx-boolean-value": 1,
      "react/jsx-closing-bracket-location": 0,
      "react/jsx-indent-props": 0,
      "react/jsx-key": 1,
      "react/jsx-max-props-per-line": 0,
      "react/jsx-no-bind": 1,
      "react/jsx-no-duplicate-props": 1,
      "react/jsx-no-literals": 0,
      "react/jsx-no-undef": 1,
      "react/jsx-pascal-case": 1,
      "react/jsx-sort-prop-types": 0,
      "react/jsx-sort-props": 0,
      "react/jsx-uses-react": 1,
      "react/jsx-uses-vars": 1,
      "react/no-danger": 1,
      "react/no-did-mount-set-state": 1,
      "react/no-did-update-set-state": 1,
      "react/no-direct-mutation-state": 1,
      "react/no-multi-comp": 1,
      "react/no-set-state": 0,
      "react/no-unknown-property": 1,
      "react/prefer-es6-class": 1,
      "react/prop-types": 1,
      "react/react-in-jsx-scope": 1,
      "react/require-extension": 1,
      "react/self-closing-comp": 1,
      "react/sort-comp": 1,
      "react/wrap-multilines": 1
   }
}

Running this through eslint gives me 2 errors:

6:20  error    Parse errors in imported module './styles.module.css': Unexpected token . (1:1)  import/namespace
6:20  error    Parse errors in imported module './styles.module.css': Unexpected token . (1:1)  import/default

When I add the following setting to the .eslintrc file:

   "settings": {
      "import/ignore": [".css$"]
   }

the parse errors go away, but the following errors take their place:

1:8   error    No default export found in module      import/default
1:17  error    PropTypes not found in 'react'         import/named
5:8   error    No default export found in module      import/default

Any suggestions on how to get eslint to play nice with React CSS Modules?

Answer 1

You can tell ESLint to ignore specific files and directories using ignorePatterns in your config files. ignorePatterns patterns follow the same rules as .eslintignore. Please see the the .eslintignore file documentation to learn more.

{
    "ignorePatterns": ["*.css", "**/vendor/*.css"],
    "rules": {
        //...
    }
}

I checked the previous answers that did not work with the eslint version 8 or later, and this one working fine for me.

Answer 2

I did find one solution: if I change the import/ignore setting in .eslintrc to

    "settings": {
      "import/ignore": [".css$","node_modules/*"]
   }

then all the linting errors go away. I guess it's okay to avoid linting everything in node_modules, but it nags at me that I don't know what was causing the errors in the first place.