Error: options.attributeGroups is not iterable

[publicJorn]

This plugin looks interesting. But I can't get it to use in it's basic form however. Am I doing something wrong?

I'm using VSCode and I've setup prettier to format on save. With the below configuration I'm getting error:

["ERROR" - 15:46:36] Error formatting document.
TypeError: options.attributeGroups is not iterable
    at transformRootNode (/Users/jorn/dev/aem/ui.apps/node_modules/prettier-plugin-organize-attributes/src/index.ts:67:30)
    at Object.parse (/Users/jorn/dev/aem/ui.apps/node_modules/prettier-plugin-organize-attributes/src/index.ts:55:5)
    at Object.parse (/Users/jorn/dev/aem/ui.apps/node_modules/prettier/index.js:7334:23)
    at coreFormat (/Users/jorn/dev/aem/ui.apps/node_modules/prettier/index.js:8645:18)
    at formatWithCursor2 (/Users/jorn/dev/aem/ui.apps/node_modules/prettier/index.js:8837:18)
    at /Users/jorn/dev/aem/ui.apps/node_modules/prettier/index.js:37229:12
    at Object.format (/Users/jorn/dev/aem/ui.apps/node_modules/prettier/index.js:37243:12)
    at t.PrettierMainThreadInstance.format (/Users/jorn/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:18023)
    at t.default.format (/Users/jorn/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:16114)
    at t.PrettierEditProvider.provideEdits (/Users/jorn/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:12672)
    at U.provideDocumentFormattingEdits (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:104:44948)

.prettierrc

{
    "plugins": ["prettier-plugin-organize-attributes"],
    "useTabs": false,
    "tabWidth": 4,
    "singleQuote": true,
    "printWidth": 120,
    "trailingComma": "all",
    "singleAttributePerLine": true,
    "bracketSameLine": true
}

Even when I do provide attributeGroups as documented I get this error. Eg:

{
    "plugins": ["prettier-plugin-organize-attributes"],
    "attributeGroups": ["^class$", "^(id|name)$", "$DEFAULT", "^aria-"],
    "useTabs": false,
    "tabWidth": 4,
    "singleQuote": true,
    "printWidth": 120,
    "trailingComma": "all",
    "singleAttributePerLine": true,
    "bracketSameLine": true
}

It looks like it breaks on https://github.com/NiklasPor/prettier-plugin-organize-attributes/blob/50a0c4f8809c34b351a400011b7734701285b5e9/src/index.ts#L67C33-L67C33

[NiklasPor]

I'd need your node version and prettier version to debug this 👍

[NiklasPor]

Can you check whether you get the same error with this repository: https://github.com/NiklasPor/organize-attributes-test With this dependencies it should work with a not outdated version of node

[splincode]

I have the same issue

[NiklasPor]

@splincode would you mind giving me:

• your node version
• your prettier version
• what kind of file extension the file has that you're trying to format

[splincode]

• node v18
• prettier 2.8.8
• *.html
• prettier-plugin-organize-attributes v1

config

module.exports = {
    $schema: 'https://json.schemastore.org/prettierrc',
    htmlWhitespaceSensitivity: 'ignore',
    printWidth: 120,
    tabWidth: 4,
    proseWrap: 'always',
    useTabs: false,
    semi: true,
    singleQuote: true,
    trailingComma: 'all',
    endOfLine: 'lf',
    bracketSpacing: false,
    singleAttributePerLine: true,
    arrowParens: 'avoid',
    plugins: [
        // https://github.com/prettier/prettier-vscode/issues/2259#issuecomment-952950119
        require.resolve('prettier-plugin-organize-attributes'),
        require.resolve('@prettier/plugin-xml'),
    ],
    attributeGroups: [
        // prettier-plugin-organize-attribute
        '$ANGULAR_STRUCTURAL_DIRECTIVE',
        '$ANGULAR_ELEMENT_REF',
        '$ID',
        '$DEFAULT',
        '$CLASS',
        '$ANGULAR_ANIMATION',
        '$ANGULAR_ANIMATION_INPUT',
        '$ANGULAR_INPUT',
        '$ANGULAR_TWO_WAY_BINDING',
        '$ANGULAR_OUTPUT',
    ],
    overrides: [
        {
            files: ['*.json', '.prettierrc', '.stylelintrc'],
            options: {parser: 'json'},
        },
        {
            files: ['*.less'],
            options: {parser: 'less'},
        },
        {
            files: ['*.scss'],
            options: {parser: 'scss'},
        },
        {
            files: ['*.component.html', '*.template.html'],
            options: {parser: 'angular'},
        },
        {
            files: ['*.xml'],
            options: {parser: 'xml'},
        },
        {
            files: ['*.yml', '*.yaml'],
            options: {parser: 'yaml', tabWidth: 2},
        },
        {
            files: ['*.md'],
            options: {parser: 'markdown', tabWidth: 2},
        },
        {
            files: ['*.js', '*.ts'],
            options: {printWidth: 90, parser: 'typescript'},
        },
        {
            files: ['*.html'],
            options: {printWidth: 120, parser: 'angular'},
        },
        {
            files: ['*.svg'],
            options: {printWidth: 200, parser: 'svg'},
        },
    ],
};

[NiklasPor]

The newest major version of this plugin only support prettier V3. Please try it with an older major version

[splincode]

Oh, thank you

[publicJorn]

Thanks for your quick reply @NiklasPor! I was on the road for a few days.

It seems for me it was the same issue. Already had a prettier@2 installed. Cheers!

It is in the package.json ofcourse. Don't know if it's possible, but maybe a better error is possible? Don't know if you want to go there...