Bug: Missing expected ) in out of project file

[jessielaf]

Info

Tool	Version
Plugin	v1.8.1
Prettier	v2.1.2
Node	v12.13.1
OS	win

Output or Error

 WARN  [PugPrinter:formatText]:  SyntaxError: Missing expected )                                                                                                                                   09:59:10
    at i (C:\Users\Jessie\effe\effe-ui\node_modules\prettier\parser-angular.js:46:16461)
    at e.parseNgInterpolation (C:\Users\Jessie\effe\effe-ui\node_modules\prettier\parser-angular.js:46:17640)
    at s (C:\Users\Jessie\effe\effe-ui\node_modules\prettier\parser-angular.js:46:28364)
    at Object.e.parseInterpolation (C:\Users\Jessie\effe\effe-ui\node_modules\prettier\parser-angular.js:46:28664)
    at C:\Users\Jessie\effe\effe-ui\node_modules\prettier\parser-angular.js:46:29282
    at Object.parse (C:\Users\Jessie\effe\effe-ui\node_modules\prettier\parser-angular.js:46:28970)
    at Object.parse (C:\Users\Jessie\effe\effe-ui\node_modules\prettier\index.js:13575:19)
    at coreFormat (C:\Users\Jessie\effe\effe-ui\node_modules\prettier\index.js:14851:25)
    at format (C:\Users\Jessie\effe\effe-ui\node_modules\prettier\index.js:15073:14)
    at formatWithCursor (C:\Users\Jessie\effe\effe-ui\node_modules\prettier\index.js:15090:12)

Expected Output

No error

Additional Context

I keep getting an error without a file specified in which the error occurs (or within my project). I get this error with two different projects.

[Shinigami92]

There is currently too little information

I think you're using Angular because the problem seems to be from prettier\parser-angular
Is your project building at all (with Angular)?
Can you find the source file of the problem on your own?

If you NOT using Angular AND your code gets formatted, then I maybe need to just declare this as a warning 🤔
I already have some of these for e.g. "Unexpected token '('", but your's is another form of message "Missing expected )"... 🤔 and this makes me curious

plugin-pug/src/printer.ts

Lines 345 to 359 in 9571d5c

	} else if (error.includes('Bindings cannot contain assignments')) {
	logger.warn(
	'[PugPrinter:formatText]: Bindings should not contain assignments:',
	code.trim()
	);
	} else if (error.includes("Unexpected token '('")) {
	logger.warn(
	"[PugPrinter:formatText]: Found unexpected token '('. If you are using Vue, you can ignore this message."
	);
	} else {
	logger.warn('[PugPrinter:formatText]: ', error);
	}
	// else ignore message
	} else {
	logger.warn('[PugPrinter:formatText]: ', error);

[jessielaf]

Sorry I forgot to clarify which framework I am using. Both of the projects I am working on are using Vue 2 and one is also using Nuxt. So I do not even use Angular which makes it so strange. This is my prettierrc:

{
  "tabWidth": 2,
  "semi": false,
  "printWidth": 120,
  "singleQuote": true,
  "pugSingleQuote": false,
  "pugAttributeSeparator": "none"
}

[Shinigami92]

Ok so I have two questions

1. Does it format? So is it just a warning?
2. If you run prettier via CLI, can you detect the file and so maybe find the specific code?

[jessielaf]

1. Yes it does format and it is just a warning.
2. I get the same error when running the cli

[Shinigami92]

With CLI you may find out what file it was
Can you copy&paste this file as a response? Maybe just the part which produces the warning.

If it's closed source you may send it to me via mail, you can find my mail in package.json ^^

[jessielaf]

Okay I got there by running lint with --debug flag. It is complaining about this file:

v-card.calendar-event
  v-toolbar(:color="calendarEvent.color" dark)
    span {{ calendarEvent.shift.title }}
    v-spacer
    v-btn(icon @click="$emit('close')")
      v-icon(color="white") close
  v-card-text
    v-layout
      b.section-title.pr-2.pb-2 {{ $t('skill.plural') }}:
      span#skills {{ join(calendarEvent.shift.skills, (x) => x.name) }}

    v-layout
      b.section-title.pr-2 {{ $t('schedule.employees') }}:
      span#employees {{ join(calendarEvent.shift.users, (x) => x.firstName + ' ' + x.lastName) }}
  v-card-actions
    v-btn#view(:to="{ name: 'shift-detail', params: { id: calendarEvent.shift.id } }" text color="info")
      v-icon.pr-1(small) visibility
      span {{ $t('actions.view') }}
    v-spacer
    v-btn#edit(:to="{ name: 'shift-id-edit', params: { id: calendarEvent.shift.id } }" text color="info")
      v-icon.pr-1(small) edit
      span {{ $t('actions.edit') }}

I couldn't find anything wrong with it very fast

[Shinigami92]

Thank you 👍

I will work on this when I'm back home

I think it's coming from one of these

span#skills {{ join(calendarEvent.shift.skills, (x) => x.name) }}
                                                  ^          ^
//- and
span#employees {{ join(calendarEvent.shift.users, (x) => x.firstName + ' ' + x.lastName) }}
                                                    ^                                  ^

---

In the meantime you could try a (maybe) workaround ^^

//- instead of
span#skills {{ join(calendarEvent.shift.skills, (x) => x.name) }}
//- do
span#skills(v-text="join(calendarEvent.shift.skills, (x) => x.name)")

[Shinigami92]

fixed via c0319bf

I hope it's ok for you to wait until we have some more/other features 🙂
And thanks for using my plugin

[jessielaf]

Of course that is okay! It is not blocking anything. Just a lot of warnings when building. I'll be looking out for the next release. Thanks for you help and quick response!