Error formatting document: RangeError: Invalid count value

[overdrivemachines]

Im trying to get formatting for ERB files working. I enabled the extension "Prettier - Code formatter" in VS code. Then in terminal I installed the plugins:

cd ~/.vscode/extensions/esbenp.prettier-vscode-9.10.3
yarn add -D prettier @prettier/plugin-ruby prettier-plugin-erb

In settings.json I have:

"files.associations": {
    "*.html.erb": "erb"
  },
"[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[erb]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

After reloading VS code, I tried to format a .erb file and I get an error:

["INFO" - 4:54:21 PM] Formatting file:///home/dipen/Desktop/workspace/clearbnb/app/views/devise/registrations/new.html.erb
["INFO" - 4:54:21 PM] Using ignore file (if present) at /home/dipen/Desktop/workspace/clearbnb/.prettierignore
["INFO" - 4:54:21 PM] File Info:
{
  "ignored": false,
  "inferredParser": "erb"
}
["INFO" - 4:54:21 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:54:21 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "singleAttributePerLine": false,
  "bracketSameLine": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 180,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/home/dipen/Desktop/workspace/clearbnb/app/views/devise/registrations/new.html.erb",
  "parser": "erb"
}
["ERROR" - 4:54:21 PM] Error formatting document.
["ERROR" - 4:54:21 PM] Invalid count value
RangeError: Invalid count value
	at String.repeat (<anonymous>)
	at /home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier-plugin-erb/lib/formatter.js:42:30
	at Array.map (<anonymous>)
	at formatMultilineExpressions (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier-plugin-erb/lib/formatter.js:7:6)
	at Object.print (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier-plugin-erb/lib/printers.js:22:27)
	at callPluginPrintFunction (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8417:26)
	at mainPrintInternal (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8366:22)
	at mainPrint (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8353:18)
	at printAstToDoc (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8345:18)
	at coreFormat (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8653:20)
	at formatWithCursor2 (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8837:18)
	at /home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:37836:12
	at Object.format (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:37850:12)
	at t.default.format (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:14731)
	at async t.PrettierEditProvider.provideEdits (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:11417)
	at async B.provideDocumentFormattingEdits (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:96:39719)
["INFO" - 4:54:21 PM] Formatting completed in 309ms.

[grncdr]

We are seeing the same thing in our project, and I believe I've tracked it down to a mismatch in expected return types in this try/catch block:

prettier-plugin-erb/lib/formatter.js

Lines 19 to 26 in 613fc24

	try {
	if (!formatRaw) {
	formattedExpression = embedTextToDoc(expression, { ...options, parser: 'ruby' });
	formattedExpression.parts.pop(); // removes newline at the end
	}
	} catch (error) {
	formatRaw = true;
	}

What happens is embedTextToDoc(...) returns a string instead of a Doc, so the formattedExpression.parts.pop() always fails. However the `formattedExpression variable has now been overwritten.

In the case where embedTextToDoc added line breaks to a long line, this leads to a mismatch between formattedExpression and expression; formattedExpression is a multi-line expression, but expression is not, so indentedLines ends up as a single element array in this block:

prettier-plugin-erb/lib/formatter.js

Lines 28 to 44 in 613fc24

	if (formatRaw && formattedExpression.trim().match(/\r?\n/)) {
	let indentedLines = expression.split(/\r?\n/);
	// The first line isn't empty. `<% smt`
	if (indentedLines[0] && indentedLines[0].trim()) {
	indentedLines = indentedLines.slice(1);
	}
	const spacesNumber = indentedLines
	.filter((s) => s)
	.map((s) => s.match(/^\s+/))
	.map((s) => (s === null ? 0 : s[0].length));
	const minSpacesNumber = Math.min(...spacesNumber);
	const spaces = ' '.repeat(minSpacesNumber);
	formattedExpression = formattedExpression

That leads to an empty spacesNumber array, a call to Math.min() //=> Infinity and the error seen above.

---

Here's an expression that can be used to trigger that behaviour:

<%= call_a_method :any_method, "it really does not matter which one", as_long_as(the_line: "is very very long"), it_will: "fail" %>

As for fixing it, replacing line 22 with formattedExpression = formattedExpression.trim() works for me.