Incompatible with @trivago/prettier-plugin-sort-imports

[GraxMonzo]

prettier version: 2.5.1
@trivago/prettier-plugin-sort-imports version: 3.1.1
tailwindcss version: 2.2.17

My .prettierrc.json

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^@/types$",
    "^@/types/(.*)$",
    "^@/api$",
    "^@/api/(.*)$",
    "^@/config/(.*)$",
    "^@/context/(.*)$",
    "^@/pages/(.*)$",
    "^@/components/(.*)$",
    "^@/hooks/(.*)$",
    "^@/helpers/(.*)$",
    "^@/images/(.*)$",
    "^@/locales/(.*)$",
    "^[./]",
    "^./tailwind.css$",
    "^.*.css$"
  ],
  "importOrderSeparation": true,
  "importOrderCaseInsensitive": false,
  "tailwindConfig": "./tailwind.config.js"
}

Only import sorting works

[matt-kinton]

I'm hacking around this at the moment with this temp plugin below where the imports are aliased. So @trivago/prettier-plugin-sort-imports -> tidy-imports and prettier-plugin-tailwindcss -> sort-classes.

You can install aliases like this yarn add -D <alias>:npm<package>

Here is the config and plugin:

.prettierrc.js

module.exports = {
    printWidth: 120,
    semi: true,
    singleQuote: true,
    tabWidth: 4,
    trailingComma: 'es5',
    endOfLine: 'auto',
    plugins: ['./prettier-plugins.js'],
};

prettier-plugins.js

const tailwindPlugin = require('sort-classes');
const tidyImportsPlugin = require('tidy-imports');

module.exports = {
    parsers: {
        typescript: {
            ...tailwindPlugin.parsers.typescript,
            preprocess: tidyImportsPlugin.parsers.typescript.preprocess,
        },
    },
};

[reinink]

Hey! Thanks for reporting this. I've created a new issue (#31) dedicated to keeping track of Prettier plugins that are not compatible with this plugin. Closing this issue in favor of that 👍

[reinink]

PS — please feel free to share this as a comment in that thread, it would be great to have it there for quick reference.

[giacomoferretti]

@Mattinton thanks for the workaround, I had to make a small change because it was giving me TypeError: Cannot read properties of undefined (reading 'map').

const tailwindPlugin = require("prettier-plugin-tailwindcss");
const sortImportsPlugin = require("@trivago/prettier-plugin-sort-imports");

module.exports = {
  parsers: {
    typescript: {
      ...tailwindPlugin.parsers.typescript,
      preprocess: sortImportsPlugin.parsers.typescript.preprocess,
    },
  },
  options: {
    ...sortImportsPlugin.options,
  },
};

[reinink]

Update on this one — we've added support for this plugin in the latest (beta) version of our Prettier plugin. You can read more about that here: #31 (comment)

[unclejustin]

In case anyone else runs into this. If you import a type with the same name as an exported function. Prettier will throw this exact same error.

Example:

import { RandomName } from './page'

// other code

export default function  RandomName () {
// more code
}