8000 Fatal syntax error if using `await` in `@method` on a component passed into named slot · Issue #1722 · vuejs/vue-loader · GitHub
[go: up one dir, main page]
Skip to content

Fatal syntax error if using await in @method on a component passed into named slot #1722

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
BenceSzalai opened this issue Sep 6, 2020 · 1 comment
Open

Fatal syntax error if using await in @method on a component passed into named slot #1722

BenceSzalai opened this issue Sep 6, 2020 · 1 comment

Comments

@BenceSzalai
Copy link
BenceSzalai commented Sep 6, 2020 •
edited
Loading

Version

15.9.3

Reproduction link

https://codesandbox.io/s/fatal-error-if-using-await-in-method-on-a-component-passed-into-named-slot-b19r0

Look at the comments in src/components/HelloWorld.vue.

Steps to reproduce

  1. Create a component with a named slot. E.g.: Wrapper.vue
  2. Use the component with the named slot in the App.
  3. Pass any other component (e.g.: SimpleComponent.vue) to the named slot.
  4. Create an @method handler using any method on the component instance passed into the named slot, e.g.: @click="console.log('mock')"
  5. Make the @method handler invalid by prefixing it with the await keyword as @click="await console.log('mock')"

What is expected?

While it is incorrect in fact to use await in @ handlers, one would expect the compiler to fail gracefully, as for example it does when the same is done with the default (unnamed) slot.

What is actually happening?

Compiler fails fatally with Syntax Error.

This may seem to be not a big problem, as using await is not valid in @method handlers anyway, but:

  • If multiple changes are made to the application, one may struggle to find out what went wrong, as the Syntax Error does not provide any context on the cause of the issue.
  • When using a complex build stack, where vue-loader is only part of the formula, this non-graceful shutdown from vue-loader can cause even more unexpected behaviour, as other components waiting for vue-loader to complete may stuck waiting without a proper error being returned, such as the issue reported here: Compilation hangs if QBtn @click contains await quasarframework/quasar#7736
  • Generally it is not a good idea to let a tool fail with syntax error due to semantic issue with input data.
@BenceSzalai BenceSzalai mentioned this issue Sep 6, 2020
Closed
@haoqunjiang
Copy link
Member

The reason the syntax is not recognized is similar to this one: vuejs/vue#11088 (comment), that await syntax can't be parsed by vue-template-es2015-compiler.

But yeah, the error message should be improved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@haoqunjiang @BenceSzalai
0