search

dilanx / craco

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
https://craco.js.org
Apache License 2.0
7.44k stars 500 forks source link

It appears npm run is ignoring my eslintrc file with create-react-app #187

Closed DavidLozzi closed 3 years ago

DavidLozzi commented 4 years ago

This has been working great for the last couple of years, but we just upgraded a slew of libraries and now eslint, when we run our app, is not referring to our eslintrc file. It's throwing errors for rules that we have either disabled or set to warning. I can type junk into the eslintrc file and nothing errors on build.

The ESLint extension in VSCode does recognize it and running eslint CLI works as expected. When running npm run start or npm run deploy-build, it seems to ignore the eslintrc file.

.eslintrc.js removed many rules for brevity

module.exports = {
  "env": {
    "browser": true,
    "jest": true
  },
  "extends": "airbnb",
  "globals": {
    "_satellite": true
  },
  "parser": "babel-eslint",
  "rules": {
    "comma-dangle": 0,
    "eol-last": 0,
    ...
    "jsx-a11y/anchor-is-valid": [
      2,
      {
        "components": [
          "Link"
        ],
        "specialLink": [
          "to"
        ]
      }
    ],
    ...
    "react/jsx-curly-newline": 0, // this is one rule that I'm specifically chasing
    ...
  },
  "settings": {
    "import/resolver": {
      "node": {
        "paths": [
          "src"
        ]
      }
    }
  }
}

craco-config.js

const path = require('path');
const { ESLINT_MODES } = require('@craco/craco');
const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  jest: {
    configure: {
      setupFiles: [
        'jest-localstorage-mock',
        '<rootDir>/jest/global_mocks.js',
        '<rootDir>/jest/global_variables.js'
      ],
      testResultsProcessor: 'jest-sonar-reporter',
      snapshotSerializers: [
        'enzyme-to-json/serializer'
      ],
      collectCoverageFrom: [
        'src/**/*.js',
        '!src/registerServiceWorker.js',
        '!src/**/*.stories.js',
        '!src/**/*.styles.js'
      ],
      coverageThreshold: {
        global: {
          branches: 60,
          functions: 70,
          lines: 80,
          statements: 1
        }
      },
      clearMocks: true
    }
  },
  eslint: {
    mode: ESLINT_MODES.file
  },
  webpack: {
    plugins: [
      new StyleLintPlugin({
        configBasedir: __dirname,
        context: path.resolve(__dirname, 'src'),
        files: ['**/*.scss']
      })
    ]
  }
};

local environment

EXTEND_ESLINT=true
REACT_APP_ENV=local
...

package.json

{
  "name": "search",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@datadog/browser-rum": "^1.12.8",
    "@okta/okta-react": "^3.0.4",
    "axios": "^0.18.1",
    "connected-react-router": "^6.7.0",
    "core-js": "^3.6.5",
    "debounce": "^1.2.0",
    "eslint-plugin-react-hooks": "^4.1.0",
    "fast-text-encoding": "^1.0.2",
    "focus-within-polyfill": "^5.0.4",
    "history": "^4.10.0",
    "jshashes": "^1.0.7",
    "lodash.groupby": "^4.6.0",
    "lodash.sortby": "^4.7.0",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.28",
    "prop-types": "^15.6.2",
    "qs": "^6.5.2",
    "react": "^16.13.0",
    "react-app-polyfill": "^1.0.6",
    "react-click-outside": "^3.0.1",
    "react-cursor-position": "^3.0.3",
    "react-dom": "^16.13.0",
    "react-easy-swipe": "0.0.17",
    "react-flexbox-grid": "^2.1.2",
    "react-html-parser": "^2.0.2",
    "react-inlinesvg": "^1.1.5",
    "react-lazyload": "^2.6.2",
    "react-number-format": "^4.0.5",
    "react-redux": "^7.2.0",
    "react-router": "^5.1.0",
    "react-router-dom": "^5.1.0",
    "react-scripts": "^3.4.1",
    "react-slick": "^0.23.1",
    "react-sticky-el": "^1.0.20",
    "react-toastify": "^4.2.0",
    "react-transition-group": "^4.4.0",
    "reactjs-popup": "^1.5.0",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "rxjs": "^6.5.5",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.83.0",
    "slick-carousel": "^1.8.1",
    "smoothscroll-polyfill": "^0.4.3",
    "styled-components": "^5.1.1",
    "use-clipboard-copy": "^0.1.1",
    "uuid": "^7.0.2"
  },
  "devDependencies": {
    "@craco/craco": "^5.6.4",
    "@storybook/addon-actions": "^5.0.5",
    "@storybook/addon-knobs": "^5.0.6",
    "@storybook/addon-links": "^5.0.5",
    "@storybook/addons": "^5.0.5",
    "@storybook/react": "^5.0.5",
    "@testing-library/react": "^10.4.7",
    "cross-env": "^7.0.2",
    "env-cmd": "^10.1.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.5.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.20.6",
    "jest-environment-jsdom": "^24.9.0",
    "jest-environment-node": "^24.9.0",
    "jest-localstorage-mock": "^2.4.0",
    "jest-sonar-reporter": "^2.0.0",
    "jest-styled-components": "^7.0.2",
    "libxmljs": "^0.19.7",
    "node-sass-chokidar": "^1.5.0",
    "npm-link-shared": "^0.5.6",
    "redux-mock-store": "^1.5.3",
    "stylelint": "^9.10.1",
    "stylelint-config-sass-guidelines": "^5.3.0",
    "stylelint-webpack-plugin": "^0.10.5"
  },
  "scripts": {
    "localxf": "cross-env NODE_PATH=src env-cmd -f ./env/localxf craco start",
    "test": "cross-env NODE_PATH=src craco test --env=jsdom",
    "test:debug": "cross-env NODE_PATH=src craco test --runInBand --no-cache --env=jsdom",
    "storybook": "cross-env NODE_PATH=src env-cmd -f ./env/local start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "deploy-build": "cross-env NODE_PATH=src env-cmd -f ./env/deploy-build craco build",
    "start": "cross-env NODE_PATH=src env-cmd -f ./env/local craco start --no-cache"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "ie 11",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }
}

I suspect there's a library above I have to update but I'm not sure what else to update!

cdosborn commented 4 years ago

I tested this workaround with 5.6.4:

eslint: {
  mode: ESLINT_MODES.extends,
  configure: (eslintConfig, { env, paths }) => {
    const customESLintConfig = require('./.eslintrc')
    return customESLintConfig
  }
},
wabi91 commented 4 years ago

@cdosborn 👍 It's also working with 5.6.4 : 

...
const customESLintConfig = require('./.eslintrc');
...
module.exports = {
  ...
  eslint: {
    mode: ESLINT_MODES.extends,
    configure: () => customESLintConfig,
  },
  ...
};

I changed and use your code because arguments of configure value function are not used and necessery.

chungweileong94 commented 4 years ago

Some of the ESLint related package version might conflict with the one came with CRA, which might result in faulty ESLint result, you might want to double-check with the version you have with the one CRA required.

Alternatively, I create a plugin recently to basically replace the CRA eslint-loader(deprecated) with eslint-webpack-plugin, which technically will ignore all the ESLint setup that the CRA has.

Manny91 commented 4 years ago

Hey @wabi91 and @cdosborn

I'm using "@craco/craco": "5.6.4", and doing the same as you guys

const customESLintConfig = require("../.eslintrc");
....

module.exports = {
  jest: {
    collectCoverageFrom: [
      "src/**/*.ts",
      "src/**/*.tsx",

      "!src/serviceWorker.ts",
      "!src/setupTests.ts",
      "!src/index.tsx",
    ],
    coveragePathIgnorePatterns: ["node_modules", "test-config", "interfaces", "src/@types/**/*.ts", "*.js"],
    eslint: {
      mode: ESLINT_MODES.extends,
      configure: customESLintConfig,
    },
...

and seem to be ignoring my rules defined in eslint 😕 is there anything else I need to do?

Thanks!

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.