Eslint-plugin-react: Error: Cannot read property 'range' of null at Array.forEach (<anonymous>)

[luismendes535]

Hi guys,

I just added ESLint to my project and it crashed after that. Do you know what is wrong with this? It seems to be something related to eslint-plugin-react.

My eslint file:

module.exports = { "extends": "airbnb", "parser": "babel-eslint", "globals": { "fetch": true, "localStorage": true, "window": true, "document": true }, "rules": { "linebreak-style": ["error", "windows"], "global-require": 0, "import/no-dynamic-require": 0, "eol-last": 0, "react/jsx-one-expression-per-line": 0, "import/prefer-default-export": 0, "camelcase": "warn", "react/destructuring-assignment": "warn", "react/prop-types": "warn", "import/no-cycle": "warn", "import/no-duplicates": "warn", "no-unused-vars": "warn", "max-len": "warn" } };

The error:

./src/components/Perfil/progress/Progress.jsx
Module build failed: TypeError: Cannot read property 'range' of null at Array.forEach ()

And the first error line shown in the console:

Uncaught Error: Module build failed: TypeError: Cannot read property 'range' of null
at Object.fixer [as fix] (C:UsersXDesktopYZclientnode_moduleseslint-plugin-reactlibrulesjsx-wrap-multilines.js:145:51)

I can post the full console error if necessary.

Thank you :)

[luismendes535]

Issue solved running prettier. I wasn't aware of the chance that the app could crash with eslint and thought it was something related to the lib version. Thanks anyway :)

[ljharb]

It's definitely a bug; it shouldn't crash. "using prettier" isn't a solution.

Could you provide the code that it's erroring on?

[luismendes535]

Hey ljharb,

It was the way my colleague was declaring the functional component. He did const ComponentX = props => <div>....More JSX...</div> without brackets. Changing to const ComponentX = props =>(<div>....More JSX...</div>); solved the issue.

[ljharb]

hmm, the parens shouldn't make a difference. Let's leave this open until we can reproduce.

[alexzherdev]

@luismendes535 I'd also ask for ESLint version and eslint-plugin-react version. We do have similar test cases that are passing right now.

[luismendes535]

Alex, here I have the devDependecies and also the eslintConfig object because I notice that I'm extending the react-app config here in the package.json and in the eslintrc.js file I extend the airbnb config: "extends": "airbnb" . Is anything wrong with this?

"eslintConfig": { "extends": "react-app" }, "devDependencies": { "eslint": "^4.19.1", "eslint-config-airbnb": "^17.1.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-jsx-a11y": "^6.1.1", "eslint-plugin-react": "^7.11.1" },

I might be setting up something wrong, I will take a deeper look.

[ljharb]

Having both eslintConfig and eslintrc seems very wrong; I’m not sure which eslint prefers but I’d recommend deleting one.

[luismendes535]

Thanks Ijharb,

The eslintConfig inside the package.json comes with 'create-react-app' and it seems to not cause any trouble, either deleting or keeping it.

I tried to reproduce the error that I had before deleting the brackets and this time around everything works properly.

I'm not sure about the solution but following the follow steps worked for me:

1. npm info "eslint-config-airbnb@latest" peerDependencies
2. npm install --save-dev eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.#
3. Add emitWarning: true to eslint-loader options inside webpack.config.dev.js file.

[ljharb]

Ah - when ejecting CRA app you end up with invalid dependencies; that’s indeed the solution.

You should delete the eslintConfig in your package.json, it’s left over from before you ejected.