compiler-sfc not compatible with prettier v3

Version

2.7.14

Reproduction link

I think it's not necessary as it's obvious in source code

Steps to reproduce

Install prettier v3 in a project depending on vue/compiler-sfc v2

What is expected?

No error

What is actually happening?

Fail in compiling template.

I found compiler-sfc tried to format code with API of prettier but format of Prettier becomes async in v3 and it returns a Promise instead of string.

vue/packages/compiler-sfc/src/compileTemplate.ts

Line 179 in 49b6bd4

code = require('prettier').format(code, {

Added a workaround in vue-loader v15.10.2. https://github.com/vuejs/vue-loader/releases/tag/v15.10.2

But let's keep this issue open so that we can fix it properly in vue core later.

But let's keep this issue open so that we can fix it properly in vue core later.

Hi @sodatea!

The problem is caused by not specifying the required prettier version in the compiler/sfc package.

While Prettier 3 is not supported, a simple solution could be to specify the Prettier version in optional dependencies. It would keep prettifying working even if Prettier 3 is installed.

There is a PR that does this: #13053

The same solution was applied by you before, but it was lost during migration to Vue 2.7: vuejs/component-compiler-utils@aea1b79

I faced this issue via vue-jest.

It throws errors like this.

 FAIL  components/atoms/MButton/index.spec.ts
  ● Test suite failed to run

    TypeError: Expected a SourceNode, string, or an array of SourceNodes and strings. Got [object Promise]

      2 | import type { Wrapper } from '@vue/test-utils'
      3 | import { RouterLinkStub, mount } from '@vue/test-utils'
    > 4 | import MButton from '~/components/atoms/MButton/index.vue'
        | ^
      5 |
      6 | const factory = (
      7 |   propsData?: object,

      at SourceNode_add [as add] (../../node_modules/@vue/vue2-jest/node_modules/source-map/lib/source-node.js:178:11)
      at addToSourceMap (../../node_modules/@vue/vue2-jest/lib/generate-code.js:14:12)
      at generateCode (../../node_modules/@vue/vue2-jest/lib/generate-code.js:49:5)
      at Object.module.exports [as process] (../../node_modules/@vue/vue2-jest/lib/process.js:169:18)
      at Object.<anonymous> (components/atoms/MButton/index.spec.ts:4:1)

Current workaround is to set the prettify option to false via jest.config.ts

module.exports = {
  globals: {
    'vue-jest': {
      templateCompiler: {
        prettify: false,
      },
    },
  },
  // ...
}

I faced this issue via vue-jest.

It throws errors like this.

 FAIL  components/atoms/MButton/index.spec.ts
  ● Test suite failed to run

    TypeError: Expected a SourceNode, string, or an array of SourceNodes and strings. Got [object Promise]

      2 | import type { Wrapper } from '@vue/test-utils'
      3 | import { RouterLinkStub, mount } from '@vue/test-utils'
    > 4 | import MButton from '~/components/atoms/MButton/index.vue'
        | ^
      5 |
      6 | const factory = (
      7 |   propsData?: object,

      at SourceNode_add [as add] (../../node_modules/@vue/vue2-jest/node_modules/source-map/lib/source-node.js:178:11)
      at addToSourceMap (../../node_modules/@vue/vue2-jest/lib/generate-code.js:14:12)
      at generateCode (../../node_modules/@vue/vue2-jest/lib/generate-code.js:49:5)
      at Object.module.exports [as process] (../../node_modules/@vue/vue2-jest/lib/process.js:169:18)
      at Object.<anonymous> (components/atoms/MButton/index.spec.ts:4:1)

Current workaround is to set the prettify option to false via jest.config.ts

module.exports = {
  globals: {
    'vue-jest': {
      templateCompiler: {
        prettify: false,
      },
    },
  },
  // ...
}

Tysm for this fix @yshrsmz