Skip to content
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.

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

use IIFE in script setup throws error #4917

Closed
heart-er opened this issue Nov 8, 2021 · 7 comments · Fixed by #4919
Closed

use IIFE in script setup throws error #4917

heart-er opened this issue Nov 8, 2021 · 7 comments · Fixed by #4919
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. 🐞 bug Something isn't working scope: compiler scope: script-setup

Comments

@heart-er
Copy link

heart-er commented Nov 8, 2021

Version

3.2.21

Reproduction link

sorry, online sfc not throws error

This is my local error and my source code

image

image

Steps to reproduce

  1. use IIFE function in script setup
  2. chrome devTool throws error about expose(...) is not a function

What is expected?

not throw error

What is actually happening?

use IIFE function in script setup throws error

@LinusBorg
Copy link
Member

If you only can reproduce it in a git repo, please share a git repo.

We can't debug what we can't reproduce reliably.

Issues without reproductions are closed. We can reopen the issue when you provide a runnable reproduction.

@heart-er
Copy link
Author

heart-er commented Nov 8, 2021

OK,thanks, this is my demo repo, it will throws error when i use IIFE in script setup

https://github.com/heart-er/vue3-error-repo
@LinusBorg @yyx990803

@LinusBorg LinusBorg reopened this Nov 8, 2021
@LinusBorg
Copy link
Member

LinusBorg commented Nov 8, 2021

Okay, can reproduce it and also found a workaround/solution: a leading semicolon:

<script setup>
;(() => {
  console.log('----')
})()
</script>

It seems there's an issue with generated code that's being inserted before that IIFE which breaks ASI.

However, it's also a good practice to have a leading semicolon here in general. prettier even adds it for me, usually.

@heart-er
Copy link
Author

heart-er commented Nov 8, 2021

OK, Thanks for the solution!

@posva posva added the 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. label Nov 8, 2021
@edison1105
Copy link
Member

I look into the code and find another problem. see sfc

<script setup>
defineExpose({ foo: 123 })
(() => {
    console.log('----');
})();
</script>

in this case, the expression node is not a defineExpose call(processDefineExpose return false). see AST
image

@LinusBorg
Copy link
Member

LinusBorg commented Nov 8, 2021

@edison1105 Well, you need to add a semicolon after defineExpose() - that's just a requirement in JS. (A linter would likely warn you about such code as well.)

In your example you caused it yourself and can fix it yourself. In OP's example there's no previous code that would require a semicolon before compilation, so it must likely be caused and solved by the compiler.

@edison1105
Copy link
Member

In your example you caused it yourself and can fix it yourself. In OP's example there's no previous code that would require a semicolon before compilation, so it must likely be caused and solved by the compiler.

make sence.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. 🐞 bug Something isn't working scope: compiler scope: script-setup
Projects
None yet
4 participants