Upgrading @vue/compiler-sfc to 3.1.x causes lint to fail, tries to add 20 blank lines around the <template> section

[Keavon]

Let me preface this by saying that I don't know if this is an issue with this Prettier plugin or with @vue/compiler-sfc, but the problem is showing up during linting with errors coming from prettier-vue/prettier which I believe is this project, so I am posting it here to start. Hopefully with more expertise, it can either be fixed here or filed as an issue with additional information in vuejs/vue-next.

Recently I have upgraded my npm dependencies and my lint (vue-cli-service lint via the npm run lint script) was failing. I have narrowed it down to @vue/compiler-sfc causing the failure. That is, I successfully upgraded all my other dependencies, even including "vue": "^3.1.4" and "eslint-plugin-prettier-vue": "^3.1.0" and the lint error does not happen, until I upgrade "@vue/compiler-sfc": "^3.0.11" to "@vue/compiler-sfc": "^3.1.0" (or ^3.1.4, the current version, but the issue starts with the 3.1 series).

Here is the commit in my project which downgrades @vue/compiler-sfc to fix the problem. Please let me know what else I can provide to help debug this. Below are the logs.

CLI log:

$ npm run lint

> graphite-web-frontend@0.1.0 lint C:\Users\Keavon\Projects\Graphite\client\web
> vue-cli-service lint || (npm install && vue-cli-service lint)

error: Insert `⏎↹` (prettier-vue/prettier) at src\App.vue:12:2:
  10 |
  11 |
> 12 |  <MainWindow />
     |  ^
  13 |  <div class="unsupported-modal-backdrop" v-if="showUnsupportedModal">
  14 |          <div class="unsupported-modal">
  15 |                  <h2>Your browser currently doesn't support Graphite</h2>


error: Insert `⏎` (prettier-vue/prettier) at src\App.vue:27:8:
  25 |                  <LayoutRow> <button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button> </LayoutRow>
  26 |          </div>
> 27 |  </div>
     |        ^
  28 |
  29 |
  30 |


warning: Unexpected alert (no-alert) at src\components\widgets\inputs\MenuBarInput.vue:147:4:
  145 |                 },
  146 |                 actionNotImplemented() {
> 147 |                         alert("This action is not yet implemented");
      |                         ^
  148 |                 },
  149 |         },
  150 |         data() {


2 errors and 1 warning found.
2 errors potentially fixable with the `--fix` option.
npm WARN eslint-config-prettier@8.3.0 requires a peer of eslint@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules@4.1.3 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN icss-utils@5.1.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-extract-imports@3.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-local-by-default@4.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-scope@3.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-modules-values@4.0.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 1445 packages in 4.196s

106 packages are looking for funding
  run `npm fund` for details

found 14 vulnerabilities (10 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
error: Insert `⏎↹` (prettier-vue/prettier) at src\App.vue:22:2:
  20 | 
  21 | 
> 22 |  <MainWindow />
     |  ^
  23 |  <div class="unsupported-modal-backdrop" v-if="showUnsupportedModal">
  24 |          <div class="unsupported-modal">
  25 |                  <h2>Your browser currently doesn't support Graphite</h2>


error: Insert `⏎` (prettier-vue/prettier) at src\App.vue:37:8:
  35 |                  <LayoutRow> <button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button> </LayoutRow>
  36 |          </div>
> 37 |  </div>
     |        ^
  38 |
  39 |
  40 |


warning: Unexpected alert (no-alert) at src\components\widgets\inputs\MenuBarInput.vue:147:4:
  145 |                 },
  146 |                 actionNotImplemented() {
> 147 |                         alert("This action is not yet implemented");
      |                         ^
  148 |                 },
  149 |         },
  150 |         data() {


2 errors and 1 warning found.
2 errors potentially fixable with the `--fix` option.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! graphite-web-frontend@0.1.0 lint: `vue-cli-service lint || (npm install && vue-cli-service lint)`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the graphite-web-frontend@0.1.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.        

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Keavon\AppData\Roaming\npm-cache\_logs\2021-07-02T22_44_45_723Z-debug.log

Note: the two error lines copy/pasted above don't show the mangled characters viewed in the console, which seem to be printing over each other:

The debug log file referenced in the last line of the above log:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'lint'
1 verbose cli ]
2 info using npm@6.14.9
3 info using node@v14.15.3
4 verbose run-script [ 'prelint', 'lint', 'postlint' ]
5 info lifecycle graphite-web-frontend@0.1.0~prelint: graphite-web-frontend@0.1.0
6 info lifecycle graphite-web-frontend@0.1.0~lint: graphite-web-frontend@0.1.0
7 verbose lifecycle graphite-web-frontend@0.1.0~lint: unsafe-perm in lifecycle true
8 verbose lifecycle graphite-web-frontend@0.1.0~lint: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Keavon\Projects\Graphite\client\web\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Python39\Scripts\;C:\Python39\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\nodejs\;C:\ProgramData\chocolatey\bin;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files\dotnet\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Users\Keavon\.cargo\bin;C:\Program Files (x86)\youtube-dl;C:\Program Files\Git\cmd;C:\Users\Keavon\.cargo\bin;C:\Users\Keavon\AppData\Local\Microsoft\WindowsApps;C:\Users\Keavon\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Keavon\AppData\Local\GitHubDesktop\bin;C:\Users\Keavon\AppData\Local\GitHubDesktop\app-2.6.1\resources\app\git\cmd;C:\Users\Keavon\AppData\Roaming\npm;C:\Users\Keavon\.dotnet\tools;C:\Program Files\ffmpeg\bin;C:\Program Files (x86)\exiftool;
9 verbose lifecycle graphite-web-frontend@0.1.0~lint: CWD: C:\Users\Keavon\Projects\Graphite\client\web
10 silly lifecycle graphite-web-frontend@0.1.0~lint: Args: [
10 silly lifecycle   '/d /s /c',
10 silly lifecycle   'vue-cli-service lint || (npm install && vue-cli-service lint)'
10 silly lifecycle ]
11 silly lifecycle graphite-web-frontend@0.1.0~lint: Returned: code: 1  signal: null
12 info lifecycle graphite-web-frontend@0.1.0~lint: Failed to exec lint script
13 verbose stack Error: graphite-web-frontend@0.1.0 lint: `vue-cli-service lint || (npm install && vue-cli-service lint)`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid graphite-web-frontend@0.1.0
15 verbose cwd C:\Users\Keavon\Projects\Graphite\client\web
16 verbose Windows_NT 10.0.19042
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "lint"
18 verbose node v14.15.3
19 verbose npm  v6.14.9
20 error code ELIFECYCLE
21 error errno 1
22 error graphite-web-frontend@0.1.0 lint: `vue-cli-service lint || (npm install && vue-cli-service lint)`
22 error Exit status 1
23 error Failed at the graphite-web-frontend@0.1.0 lint script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Because the lint command automatically fixes the files, it ends up adding 20 blank lines (with one level of tab indentation) only in the App.vue file after the opening <template> tag, and another 20 blank lines (without any indentation, so actually blank) right before the closing </template> tag. Below is the file modified by the bugged linter, exactly the same as the original except for the two added blocks of 20 lines, and I have omitted the <style> and <script> tags later in the file which were untouched:

<template>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	<MainWindow />
	<div class="unsupported-modal-backdrop" v-if="showUnsupportedModal">
		<div class="unsupported-modal">
			<h2>Your browser currently doesn't support Graphite</h2>
			<p>
				Unfortunately, some features won't work properly in your browser. Please use a modern browser other than Safari, such as Firefox, Chrome, or Edge. Rest assured, Safari compatibility is
				planned.
			</p>
			<p>
				Your browser is missing support for the
				<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a> JavaScript
				API which is required for using the editor. You can still explore the user interface.
			</p>
			<LayoutRow> <button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button> </LayoutRow>
		</div>
	</div>




















</template>

[ferrykranenburgcw]

Have the same issue .

[meteorlxy]

Weird. Could not reproduce it when upgrading @vue/compiler-sfc in currect repo.

Could anyone provide a reproduction repo?

[ferrykranenburgcw]

Try this one: https://github.com/ferrykranenburgcw/vue-todo-pwa

Use eslint --fix on any .vue file and it will add 10 blank newlines at the end of the file..

[Keavon]

@meteorlxy you should be able to reproduce it with my Graphite project's repo however this is unfortunately not a minimal reproduction and you may need to install some dependencies (like Rust) for the project to compile, but you may be able to get away with not compiling the project and just linting the frontend part of the codebase located in /client/web. I may or may not have time in the coming week or create a more minimal reproduction repo. The important thing to mention is that it's necessary to delete the node_modules folder between npm installs after changing the @vue/compiler-sfc version in package.json.

[Keavon]

Just an update, I don't seem to be having this problem anymore (with all my dependencies up to date). @ferrykranenburgcw how about you?

[AndreiLevitski]

@Keavon what versions are you using? I am using versions (an still having this issue):
"devDependencies": {
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier-vue": "^3.1.0",
"eslint-plugin-vue": "^7.18.0",
"prettier": "^2.4.1"
}

[Keavon]

@AndreiLevitski https://github.com/GraphiteEditor/Graphite/blob/master/frontend/package.json

[invokermain]

Having the same issue as well. I believe it might be a Windows only issue? Could not recreate on WSL. Can provide more information if someone else requires.

Some dev dep locked versions if it's useful:

• @vue/compiler-sfc: "3.2.19"
• eslint-plugin-prettier-vue: "3.1.0"

Dev dependencies from package:

    "@openapitools/openapi-generator-cli": "^2.4.1",
    "@types/body-scroll-lock": "^3.1.0",
    "@types/eslint": "^7.28.1",
    "@typescript-eslint/eslint-plugin": "^4.31.0",
    "@typescript-eslint/parser": "^4.31.0",
    "@vitejs/plugin-vue": "^1.6.0",
    "@vue/compiler-sfc": "^3.2.9",
    "@vue/eslint-config-typescript": "^7.0.0",
    "autoprefixer": "^10.3.7",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier-vue": "^3.1.0",
    "eslint-plugin-vue": "^7.17.0",
    "naive-ui": "^2.17.2",
    "postcss": "^8.3.11",
    "prettier": "^2.3.2",
    "tailwindcss": "^2.2.17",
    "typescript": "^4.4.2",
    "vite": "^2.5.2",
    "vite-plugin-eslint": "^1.3.0",
    "vue-tsc": "^0.28.4"
  }

and .eslintrc.js:

module.exports = {
  env: {
    node: true,
  },
  root: true,
  extends: [
    'plugin:prettier-vue/recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    'prettier',
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier-vue/prettier': [
      'error',
      {
        printWidth: 100,
        singleQuote: true,
        semi: false,
        trailingComma: 'es5',
        endOfLine: 'auto'
      },
    ],
    "linebreak-style": ["error", (process.platform === "win32" ? "windows" : "unix")],  // assumes you are using autocrlf
  },
  // Methods added in vue 3 that are now global and dont require imports
  globals:{
    defineProps:'readonly',
    withDefaults:'readonly',
    defineEmits: 'readonly'
  }
}

Example SFC:

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from '@/store'
const store = useStore()
const name = computed(() => store.state.oidc.name)
</script>

<template>
  <div>
    <p>Hello {{ name }}</p>
  </div>
</template>

All line endings are CRLF. Let me know if you need any more information to try and help you recreate it!

[meteorlxy]

Sorry for delay. I'm closing this issue as it seems to be stale. Feel free to report another one with a valid reproduction if the problem still exists.