Expected 'multiple' syntax before 'single' syntax

Viewed 7624

I am trying to import files like this but getting error: Expected 'multiple' syntax before 'single' syntax

import { Component, Prop, Vue } from 'vue-property-decorator';
import { getModule } from 'vuex-module-decorators';
import { ApiException, IProduct, IProductCategory } from '@/services'; // error here
import { INavs } from '@/types';

Rule config:

'sort-imports': ['error', {
    'ignoreCase': false,
    'ignoreDeclarationSort': false,
    'ignoreMemberSort': false,
    'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single']
}]
3 Answers

import { ApiException, IProduct, IProductCategory } from '@/services'; is importing multiple (three) exports.

Both import { getModule } from 'vuex-module-decorators'; and import { INavs } from '@/types'; are only importing a single named export.

That error will go way if you move import { ApiException, IProduct, IProductCategory } up one line so it's above the single imports. This is configured in your settings where it says 'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single'] because 'multiple' is listed before 'single'.

You can read more about it in the eslint documentation here https://eslint.org/docs/rules/sort-imports

Ran into this too looking for a CI solution for reordering multiple imports, since ESLint --fix only supports multiple members on a single line; i.e. autofixing unsupported when spread over multiple lines - e.g. from a low Prettier printWidth of ~80.

eslint-plugin-simple-import-sort works great, fixed the errors after amending config from the docs:

Make sure not to use other sorting rules at the same time:

  • [sort-imports]
  • [import/order]

To resolve this issue I'll recommend modifying your .eslintrc.json setting

    "sort-imports": ["error", {
        "ignoreCase": false,
        "ignoreDeclarationSort": false,
        "ignoreMemberSort": false,
        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
        "allowSeparatedGroups": false // <-- Change this to true
      }],

Which prevents you from reordering local imports and third party imports that are in different groups but violate the memberSyntaxSortOrder as earlier suggested

Related