Блог

Я пытаюсь добавить модули React CSS в свой проект, но у меня возникли проблемы с eslint. Мой вид входа в систему выглядит следующим образом:

 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);  

И вот мой оригинальный файл .eslintrc, перед добавлением параметра импорта / игнорирования:

 {
   "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
   }
}
  

Запуск этого через eslint дает мне 2 ошибки:

 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
  

Когда я добавляю следующую настройку в файл .eslintrc:

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

ошибки синтаксического анализа исчезают, но их место занимают следующие ошибки:

 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
  

Любые предложения о том, как заставить eslint работать с модулями React CSS?

Я нашел одно решение: если я изменю параметр импорта / игнорирования в .eslintrc на

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

затем все ошибки компоновки исчезают. Я думаю, что можно избегать вставки всего node_modules , но меня раздражает, что я не знаю, что в первую очередь вызывало ошибки.

Вы можете указать ESLint игнорировать определенные файлы и каталоги, используя ignorePatterns в ваших файлах конфигурации. Шаблоны ignorePatterns следуют тем же правилам, что и .eslintignore . Пожалуйста, ознакомьтесь с документацией по файлу .eslintignore, чтобы узнать больше.

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

Я проверил предыдущие ответы, которые не работали с eslint версии 8 или более поздней, и этот работает нормально для меня.

Это связано с тем, что import styles from './styles.module.css'; узел пытается загрузить модуль CSS так, как это было бы JS, и в вашем случае происходит сбой рендеринга на стороне сервера или Jest. Правильное решение — настроить Babel для выполнения на стороне сервера / Jest, чтобы преобразовать этот импорт CSS в сопоставления стилей, как это сделал бы Webpack. Для этого есть плагин.