Formatting Vue SFC Files Results in 'Cannot read properties of undefined (reading 'match')' Error

[litchia]

Your Environment

• Prettier version: 3.2.5
• node version: 20.11.1
• package manager: pnpm@8
• IDE: VScode

Describe the bug

When attempting to format Vue Single File Components (SFC) with Prettier, I encounter a TypeError: Cannot read properties of undefined (reading 'match'). This issue arises specifically when using @ianvs/prettier-plugin-sort-imports. However, switching to @trivago/prettier-plugin-sort-imports does not produce this error.

To Reproduce

1. Create a new Vite project using pnpm create vite.
2. Install both @ianvs/prettier-plugin-sort-imports and @trivago/prettier-plugin-sort-imports.
3. Try formatting a .vue file with Prettier.
4. The error occurs when @ianvs/prettier-plugin-sort-imports is enabled, but not with @trivago/prettier-plugin-sort-imports.

Expected behavior

Expected Prettier to format Vue SFC files without any errors, applying the configured code style rules.

Screenshots, code sample, etc

Not applicable due to sensitive content. The issue occurs with any Vue SFC file, regardless of its content.

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

module.exports = {
    printWidth: 80,
    tabWidth: 4,
    trailingComma: 'all',
    singleQuote: true,
    semi: true,
    plugins: ['@ianvs/prettier-plugin-sort-imports'],
    importOrder: [
        '^@core/(.*)$',
        '',
        '^@server/(.*)$',
        '',
        '^@ui/(.*)$',
        '',
        '^[./]',
    ],
    importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
    importOrderTypeScriptVersion: '5.0.0',
};

Error log

TypeError: Cannot read properties of undefined (reading 'match')
    at Do (/Users/nofeel/Desktop/example/prettier-test/node_modules/.pnpm/prettier@3.2.5/node_modules/prettier/plugins/html.js:19:6172)
    at Ks (/Users/nofeel/Desktop/example/prettier-test/node_modules/.pnpm/prettier@3.2.5/node_modules/prettier/plugins/html.js:19:19158)
    at Object.parse (/Users/nofeel/Desktop/example/prettier-test/node_modules/.pnpm/prettier@3.2.5/node_modules/prettier/plugins/html.js:19:19854)
    at parse4 (file:///Users/nofeel/Desktop/example/prettier-test/node_modules/.pnpm/prettier@3.2.5/node_modules/prettier/index.mjs:22117:24)
    at async coreFormat (file:///Users/nofeel/Desktop/example/prettier-test/node_modules/.pnpm/prettier@3.2.5/node_modules/prettier/index.mjs:22607:7)
    at async formatWithCursor (file:///Users/nofeel/Desktop/example/prettier-test/node_modules/.pnpm/prettier@3.2.5/node_modules/prettier/index.mjs:22809:14)
    at async Module.format2 (file:///Users/nofeel/Desktop/example/prettier-test/node_modules/.pnpm/prettier@3.2.5/node_modules/prettier/index.mjs:24194:25)

Contribute to @ianvs/prettier-plugin-sort-imports

• I'm willing to fix this bug 🥇

[IanVS]

Thanks for the report, does this also happen with version 4.1.1 of this package? Also, what version of vue are you using?

[gmichaeljaison]

I have the same issue, and it works with version 4.0.2, but fails with versions 4.1.1 and 4.2.0.
I am able to reproduce this on a small package with below dependencies only:

{
    "name": "dummy",
    "private": true,
    "devDependencies": {
        "@ianvs/prettier-plugin-sort-imports": "^4.2.0",
        "@vue/compiler-sfc": "^3.4.21",
        "prettier": "^2.8.8"
    }
}

Reproduce at:
https://stackblitz.com/edit/stackblitz-starters-g2p6xd?file=package.json

[litchia]

Thanks for the report, does this also happen with version 4.1.1 of this package? Also, what version of vue are you using?

Sure, I just started my new project, so they're all the latest versions.

"@ianvs/prettier-plugin-sort-imports": "^4.2.0",
"prettier": "^3.2.5",
"vue": "^3.4.21",

[shaddollxz]

I have the same issue, and it works with version 4.0.2, but fails with versions 4.1.1 and 4.2.0. I am able to reproduce this on a small package with below dependencies only:

{
    "name": "dummy",
    "private": true,
    "devDependencies": {
        "@ianvs/prettier-plugin-sort-imports": "^4.2.0",
        "@vue/compiler-sfc": "^3.4.21",
        "prettier": "^2.8.8"
    }
}

Reproduce at: https://stackblitz.com/edit/stackblitz-starters-g2p6xd?file=package.json

v4.0.2 also has this error, just has below code

import type { Ref } from "vue"

this is my config

{
  importOrder: [
    '<TYPES><THIRD_PARTY_MODULES>',
    '<THIRD_PARTY_MODULES>',
    '',
    '<TYPES>^@/(.*)$',
    '^@/(.*)$',
    '',
    '<TYPES>^[./]',
    '^[./]',
  ],
}

[messenjer]

Same error, after upgrading this morning to the new version 4.2.0 from 4.1.1

[IanVS]

Thanks for the reports, everyone. This broke because of the way we tried to detect vue 3 vs vue 2.7 when we added support for 2.7 in the last release. It seems that @vue/compiler-sfc had what I would consider a breaking change between version 3.3 and 3.4, removing an export. We were running our tests with 3.3 and everything worked, but the more recent versions break. I've pushed up a PR that will detect the vue version more reliably, and should continue to maintain support for both vue 3 and 2.7.

[litchia]

Thanks for the reports, everyone. This broke because of the way we tried to detect vue 3 vs vue 2.7 when we added support for 2.7 in the last release. It seems that @vue/compiler-sfc had what I would consider a breaking change between version 3.3 and 3.4, removing an export. We were running our tests with 3.3 and everything worked, but the more recent versions break. I've pushed up a PR that will detect the vue version more reliably, and should continue to maintain support for both vue 3 and 2.7.

Thank you! This is my first time mustering up the courage to raise an issue, and it has given me a great sense of accomplishment.😄

[shalldie]

I met the same error, here's the version:

{
  "vue": "2.7.16",
  "@vue/compiler-sfc": "2.7.16",
  "@ianvs/prettier-plugin-sort-imports": "4.2.1"
}

@IanVS

If I upgrade "@vue/compiler-sfc": "2.7.16" to "@vue/compiler-sfc": "3.4.21", it works well.
But my vue is 2.7.16, I'm worried about what problems upgrading @vue/compiler-sfc may bring 😂😂.

[IanVS]

Thanks @shalldie. Were you using this plugin before 4.2.1 and was it working for you before? If you're willing to open a new issue and ideally include some steps to reproduce or a link to a reproduction, that would be awesome.

[shalldie]

Thanks @shalldie. Were you using this plugin before 4.2.1 and was it working for you before? If you're willing to open a new issue and ideally include some steps to reproduce or a link to a reproduction, that would be awesome.

@IanVS

I open an issue: #162 (Which try my best using english 😂)