Regression: Variables exposed from <script> can't be used in defineProps

[henribru]

Version

3.2.12

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Open the reproduction and observe the error. Switch to v3.2.11 and observe that it works. Then comment the exported variable and uncomment the non-exported variable. Observe that you now get an error in v3.2.11. Switch to v3.2.4 and observe that it works.

What is expected?

Variables defined in <script> should be usable in defineProps. They used to be.

What is actually happening?

You get an error. The error in the playground isn't actually that helpful, but when I reproduce this locally I get this error in the overlay:

"defineProps() in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function. If your component options requires initialization in the module scope, use a separate normal <script> to export the options instead."

---

I believe these to be regressions from 872b3f7 and 8055445, as the non-exported variable works in defineProps until 3.2.5 and the exported one works until 3.2.12, which matches up perfectly with these fixes.

[ygj6]

According to: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md

• The options passed to defineProps and defineEmits will be hoisted out of setup into module scope. Therefore, the options cannot reference local variables declared in setup scope. Doing so will result in a compile error. However, it can reference imported bindings since they are in the module scope as well.

it seems to be a known behavior.

[henribru]

The RFC specifies setup scope. My variables are defined in a regular script block so they're in module scope.

(And as mentioned it used to work fine)

[lidlanca]

Error: [@vue/compiler-sfc] `defineProps()` in <script setup> cannot reference 
locally declared variables because it will be hoisted
outside of the setup() function. 
If your component options requires initialization in the module scope,
use a separate normal <script> to export the options instead.

<script>
export const bar = 14;
//const bar = 14;

export default {};
</script>

<script setup>
defineProps({
  foo: {
    type: Number,
    default: _bar,
  }
});
</script>



<template>
  <h1>{{ foo }}</h1>
</template>

would have worked and compiled to this without the compiler error.

/* Analyzed bindings: {
  "foo": "props",
  "bar": "setup-const"
} */
import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"


export const bar = 14;
//const bar = 14;

const __default__ = {};

function setup(__props) {



return (_ctx, _cache) => {
  return (_openBlock(), _createElementBlock("h1", null, _toDisplayString(__props.foo), 1 /* TEXT */))
}
}


const __sfc__ = /*#__PURE__*/ Object.assign(__default__, {
  props: {
  foo: {
    type: Number,
    default: bar,
  }
},
  setup
})
__sfc__.__file = "App.vue"
export default __sfc__