Bug: eslint --fix breaks code when airbnb no-duplicate-imports happens

[sergeykimaia]

Environment

Node version: v14.17.1
npm version: 6.14.13
Local ESLint version: "^8.10.0"
Global ESLint version:
Operating System: macOS BigSur 11.6

What parser are you using?

Default (Espree)

What did you do?

Configuration

{
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.67.3"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/runtime": "^7.17.2",
    "@react-native-community/eslint-config": "^3.0.1",
    "babel-jest": "^27.5.1",
    "eslint": "^8.10.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.29.2",
    "eslint-plugin-react-hooks": "^4.3.0",
    "jest": "^27.5.1",
    "metro-react-native-babel-preset": "^0.69.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

import {
  StyleSheet,
  View,
  TextInput,
  ImageBackground,
  Image,
  TouchableOpacity,
  SafeAreaView
} from 'react-native';
import { I18nManager } from 'react-native';

What did you expect to happen?

expected it to format to:

import {
  StyleSheet,
  View,
  TextInput,
  ImageBackground,
  Image,
  TouchableOpacity,
  SafeAreaView,
  I18nManager
} from 'react-native';

What actually happened?

import {
  StyleSheet,
  View,
  TextInput,
  ImageBackground,
  Image,
  TouchableOpacity,
  SafeAreaView, // <<< notice the comma here and in the line after
, I18nManager } from 'react-native'; 

Participation

• I am willing to submit a pull request for this issue.

Additional comments

when adding the airbnb extension it tries to merge both imports

[mdjermanovic]

Hi @sergeykimaia, thanks for the issue!

The core rule no-duplicate-imports doesn't provide autofix. Can you run eslint without --fix and check which other rules report errors in this code?

[sergeykimaia]

@mdjermanovic
8:15 error Missing trailing comma comma-dangle
9:8 warning imported multiple times import/no-duplicates
10:29 warning imported multiple times import/no-duplicates

missing comma after SafeAreaView
and the two import duplicates

haven't included unused variable warnings

also want to add that running eslint fix for:

import {
  StyleSheet,
  View,
  TextInput,
  ImageBackground,
  Image,
  TouchableOpacity,
  SafeAreaView, //<<<< added comma here
} from 'react-native';
import { I18nManager } from 'react-native';

produces the expected result

[mdjermanovic]

Thanks for the info!

I thought it's a bug in a plugin rule import/no-duplicates, but this may be a case where two rules produce valid fixes that result in an invalid code when they're applied together. I'll investigate further.

[ljharb]

ahhhh right, the combination of comma-dangle and import/no-duplicates may be the issue, good call.

[mdjermanovic]

this may be a case where two rules produce valid fixes that result in an invalid code when they're applied together.

This is exactly what happens.

With this configuration:

module.exports = {
    plugins: ["import"],
    rules: {
        "comma-dangle": ["error", { imports: "always-multiline" }],
        "import/no-duplicates": ["error"]
    },
    parserOptions: {
        sourceType: "module",
        ecmaVersion: 2022
    }
};

and this code:

import {
  StyleSheet,
  View,
  TextInput,
  ImageBackground,
  Image,
  TouchableOpacity,
  SafeAreaView
} from 'react-native';
import { I18nManager } from 'react-native';

the two rules produce the following fixes:

• comma-dangle: "fix":{"range":[106,106],"text":","}}
• import/no-duplicates: "fix":{"range":[107,173],"text":", I18nManager } from 'react-native';\n"}}

Since the ranges are not overlapping, both fixes will be applied in the same pass:

import {
  StyleSheet,
  View,
  TextInput,
  ImageBackground,
  Image,
  TouchableOpacity,
  SafeAreaView,
, I18nManager } from 'react-native';

That results in two commas, which is a parsing error. I made a PR to fix this in comma-dangle: #15669