compiler-sfc not compatible with prettier v3

[kingyue737]

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, {

[haoqunjiang]

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.

[ShGKme]

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

[yshrsmz]

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,
      },
    },
  },
  // ...
}

[CaroEvans]

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