defineProps is not defined inside script setup

[simlevesque]

Version

3.2.22

Steps to reproduce

Simply have a defineProps inside a script setup. Fails at runtime.

What is expected?

defineProps should be removed by the compiler and not present at runtime

What is actually happening?

defineProps is in the code, but it is not defined

---

Stack trace:

Uncaught (in promise) ReferenceError: defineProps is not defined
at setup (List.vue.ts?61ab:100)
at callWithErrorHandling (runtime-core.esm-bundler.js?1f4e:6706)
at setupStatefulComponent (runtime-core.esm-bundler.js?1f4e:6315)
at setupComponent (runtime-core.esm-bundler.js?1f4e:6271)
at mountComponent (runtime-core.esm-bundler.js?1f4e:4123)
at processComponent (runtime-core.esm-bundler.js?1f4e:4098)
at patch (runtime-core.esm-bundler.js?1f4e:3693)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?1f4e:4238)
at ReactiveEffect.run (reactivity.esm-bundler.js?a93e:160)
at setupRenderEffect (runtime-core.esm-bundler.js?1f4e:4357)

[caozhong1996]

You can use https://sfc.vuejs.org/ to reproduce this error.

[yyx990803]

Please provide a reproduction as required by the issue guidelines.

"Simply have a defineProps inside a script setup. Fails at runtime."

This doesn't help because obviously it's not happening to other users. It's related to your build setup and without that information there's nothing we can do.

[simlevesque]

@yyx990803 @caozhong1996

This works: https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiwgdG9SZWZzIH0gZnJvbSAndnVlJ1xuXG5jb25zdCBwcm9wcyA9IGRlZmluZVByb3BzKHtcbiAgXHRtc2c6IHtcbiAgICAgIHR5cGU6IFN0cmluZ1xuICAgIH1cbn0pXG5jb25zdCB7IG1zZyB9ID0gdG9SZWZzKHByb3BzKTtcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxoMT57eyBtc2cgfX08L2gxPlxuICA8aW5wdXQgdi1tb2RlbD1cIm1zZ1wiPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=

This does not: https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiwgdG9SZWZzIH0gZnJvbSAndnVlJ1xuXG5jb25zdCB7IG1zZyB9ID0gdG9SZWZzKGRlZmluZVByb3BzKHtcbiAgXHRtc2c6IHtcbiAgICAgIHR5cGU6IFN0cmluZ1xuICAgIH1cbn0pKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGgxPnt7IG1zZyB9fTwvaDE+XG4gIDxpbnB1dCB2LW1vZGVsPVwibXNnXCI+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==

Another error case: https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiwgdG9SZWZzIH0gZnJvbSAndnVlJ1xuXG5jb25zdCB7IG1zZyB9ID0gdG9SZWZzKCAvLyBuZXcgbGluZVxuICBkZWZpbmVQcm9wcyh7XG4gIFx0bXNnOiB7XG4gICAgICB0eXBlOiBTdHJpbmdcbiAgICB9XG59KSlcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxoMT57eyBtc2cgfX08L2gxPlxuICA8aW5wdXQgdi1tb2RlbD1cIm1zZ1wiPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=

Seems like the parser is very strict. This is not well documented (or at all) and I think it should more clear. Those three examples seem like they should work the same.

edit: Seems like it is a similar problem to issue #3739

[caozhong1996]

DefineProps does not exist at runtime, so just don't do this.🙃

const { msg } = toRefs(defineProps({
  msg: {
    type: String
  }
}))

[xgvargas]

First I assume my system is properly configured since it all works while using setup function inside a normal <script lang="coffee">. Issue only appear when I try to use the nicer <script setup> tag.

I'm trying to use <script setup lang="coffee"> and defineProps, defineEmits and defineExpose they all fail.

<script setup lang="coffee">
props = defineProps({a: Number})   # ReferenceError: defineProps is not defined
emit = defineEmits(['b'])
console.log(props)
console.log(emit)
</script>

If I remove the lang tag it works if I declare variable with both const or let.

<script setup>
const props = defineProps({a: Number})
let emit = defineEmits(['b'])
console.log(props);                   // works
console.log(emit);                    // works
</script>

Without proper declaration if fails even with plain JS:

<script setup>
props = defineProps({a: Number})    // ReferenceError: defineProps is not defined
emit = defineEmits(['b'])
console.log(props);
console.log(emit);
</script>

Any chance the code to parse these macros are forcing presence of const or let?

Any workaround to use coffee script here?

[enjoyyourcopepods]

@xgvargas
For me, using <script setup lang="ts">, importing defineProps solves the "defineProps is not defined" error, e.g.:

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps({
  id: {
    required: true,
    type: String,
  },
});
</script>

However, ESLint gives the warning:

warning 'props' is assigned a value but never used @typescript-eslint/no-unused-vars

I have tried adding the rule "vue/script-setup-uses-vars": "error" to .eslintrc.js (as suggested at vuejs/eslint-plugin-vue#1617), but it doesn't prevent the warning.

  rules: {
    "vue/script-setup-uses-vars": "error",
  },

[simlevesque]

@enjoyyourcopepods you should not do this. defineProps is not accessible at runtime.

[enjoyyourcopepods]

I eventually solved my "defineProps is not defined" ESLint errors by doing the following:

• Updated Vue, created a new project, copied the old .vue files into the new project directories.
• Installed nvm version 1.1.9. In nvm, installed and used node 16.13.2 (solving npm ERR! Unexpected token '.' with with nvm-windows <= 1.1.7 npm/cli#4234).
• In Visual Studio Code, uninstalled Vetur, installed Volar.
• Installed vue-eslint-parser (https://github.com/vuejs/vue-eslint-parser).
• In .eslintrc.js, removed the "vue/script-setup-uses-vars": "error" rule. extends and parser are now:

extends: [
   "@vue/typescript/recommended",
   "plugin:vue/vue3-recommended",
   "@vue/standard",
   "prettier",
   "eslint:recommended",
 ],
parser: "vue-eslint-parser",

• Changed the template language from Pug to plain HTML. <template lang="pug"> is now <template>.
• Removed import { defineProps } from "vue"; from within <script setup lang=ts>.
• Used type-only declarations for props, e.g.

const props = defineProps<{
  id: string;
}>();

and in the template, e.g.
{{ props.id }}