Eslint-plugin-import: `pathGroups` caused "should NOT have additional properties" error

[chungweileong94]

In my react app codebase, I have an absolute path alias setup, so I have to use pathGroups in import/order to tell the ESLint that the alias is an internal import. However, it keeps throwing an error about the import/order config is invalid, and apparently the problem is caused by the pathGroup.

Here is my ESLint config

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "react-app",
    "airbnb"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks"
  ],
  "rules": {
    "react/jsx-indent": "off",
    "react/jsx-filename-extension": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-props-no-spreading": "off",
    "react/require-default-props": "off",
    "import/prefer-default-export": "off",
    "import/newline-after-import": [
      "warn",
      {
        "count": 2
      }
    ],
    "import/order": [
      "warn",
      {
        "groups": [
          "builtin",
          "external",
          "parent",
          "sibling",
          "index"
        ],
        "pathGroups": [
          {
            "pattern": "@/**",
            "group": "parent"
          }
        ],
        "newlines-between": "always"
      }
    ],
    "indent": "off",
    "no-nested-ternary": "off",
    "no-restricted-syntax": "off",
    "no-await-in-loop": "off",
    "object-curly-newline": "off",
    "object-curly-spacing": "off",
    "no-unused-expressions": "off",
    "radix": "off",
    "no-plusplus": "off",
    "max-len": "off",
    "func-names": "off",
    "arrow-parens": [
      "warn",
      "as-needed"
    ]
  }
}

[ljharb]

What error does it throw?

[chungweileong94]

What error does it throw?

This the error I got:

BaseConfig:
        Configuration for rule "import/order" is invalid:
        Value {"groups":["builtin","external","parent","sibling","index"],"pathGroups":[{"pattern":"@/**","group":"parent"}],"newlines-between":"always"} should NOT have additional properties.

[ljharb]

What version of eslint-plugin-import are you using? pathGroups was added in v2.20.

[chungweileong94]

Yeah, I'm using v2.20. Actually, I think the problem is caused by the eslint-loader, it's working fine of I use eslint to check the linting, but not when I run the code. I'm not really sure yet, still debugging.

[chungweileong94]

@ljharb I created a simple repo to reproduce the problem.

All you need to do is to play around the import statements in App.js, you might not see any problem for the first time, but if you keep playing around the import order, you might able to reproduce the problem.

It works perfectly fine if you use yarn eslint to linting the code, but it doesn't work during the yarn start

I did rewire the create-react-app config, it might be the cause of it, but I mean it shouldn't be happening🤞

[ljharb]

If it works with eslint directly, but not eslint-loader, it's a bug in eslint-loader.

[liesislukas]

using "eslint-plugin-import": "^2.20.2" and it's the only rule which fails, added only alphabetize property, doesn't matter which option i add, i get that additional property error

[CptFabulouso]

In my case this was somehow caused by babel-eslint in devDependencies, not sure why I had it there, but after removing it everything works fine.

I had issues as described above, meaning:

• Only groups and newlines-between prop worked, otherwise the "should NOT have additional properties" error appeared.
• Worked fine when running eslint from terminal