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

simultaneous use default script and script setup cause compile error #4376

Closed
PiscineMolitorPatel opened this issue Aug 18, 2021 · 4 comments · Fixed by #4419
Closed

simultaneous use default script and script setup cause compile error #4376

PiscineMolitorPatel opened this issue Aug 18, 2021 · 4 comments · Fixed by #4419

Comments

@PiscineMolitorPatel
Copy link

Version

3.2.4

Reproduction link

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#detailed-design

Steps to reproduce

I must use <script> frist,then use <script setup>, Otherwise it will throw an error.

If I use it like this,the browser will give an error :Cannot access 'default' before initialization

<script lang="ts" setup>
// do something
</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: '"MyComponent"
})
</script>

What is expected?

no error

What is actually happening?

Error: Cannot access 'default' before initialization


my english is not good, I use translation

中文说明:当我同时使用 script 和 script setup 时,我必须优先使用默认的 script,然后使用 script setup 特性,如果将它们的书写顺序颠倒过来会导致浏览器抛出错误,但在启动服务时不会出现问题

@lidlanca
Copy link
Contributor

lidlanca commented Aug 18, 2021

export default <script> block, can not be after <script setup>
error
ReferenceError: can't access lexical declaration '__default__' before initialization

input:

<template>

</template>


<script lang="ts" setup>
  // do something
</script>


<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name:  "MyComponent"
  })
</script>

generated:

import { defineComponent as _defineComponent } from 'vue'


const __sfc__ = _defineComponent({
  ...__default__,  // <-- ReferenceError: can't access lexical declaration '__default__' before initialization
  setup(__props) {

  // do something

return (_ctx,_cache) => {
  return null
}
}

})
  import { defineComponent } from 'vue'
  const __default__ = defineComponent({
    name:  "MyComponent"
  })
__sfc__.__file = "Comp.vue"
export default __sfc__

@posva
Copy link
Member

posva commented Aug 18, 2021

This is mentioned in the RFC

@klwfwdk
Copy link
Contributor

klwfwdk commented Aug 20, 2021

This is mentioned in the RFC

why it works well in js, and only lang="ts" has error.

@Bigfish8
Copy link
Contributor

This is mentioned in the RFC

https://github.com/vuejs/rfcs/blob/script-setup/active-rfcs/0000-script-setup.md
It seems the condition is not mentioned in the RFC.
Do I find the right place?

yyx990803 pushed a commit that referenced this issue Aug 23, 2021
@github-actions github-actions bot locked and limited conversation to collaborators Oct 13, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants
@posva @lidlanca @klwfwdk @Bigfish8 @PiscineMolitorPatel and others