.eslintrc.js file being ignored with create react app and craco - create-react-app

Question

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!

Answer 1

This seems to be a viable workaround:
eslint: {
mode: ESLINT_MODES.extends,
configure: () => {
// Workaround for broken ESLINT_MODES.file mode
return require('./.eslintrc')
}
},