Vue.js - ReferenceError: defineProps is not defined

user_13879957 0
Viewed 5715

I have a Vue 3 app. This app relies on Vite, Vue Router, Pinia. The specific versions are:

  • Vue: 3.2.31
  • Vue Router: 4.0.13
  • Pinia: 2.0.11

This app has a single file component that represents a "page". This single file component is defined like this:

page.vue

<template>
  <div>
    Hello! Thank you for visiting {{ id }}!
  </div>
</template>

<script setup>
    import { onMounted } from 'vue';
    import { useStore } from '../stores/store';

    const myStore = useStore();

    onMounted(() => {
        const props = defineProps({ id:Number });    
        console.log(props);
    });
</script>

My goal is such that when someone visits https://[my-site].com/pages/{some-id}, I get the id passed in via the URL. Currently, my route is defined like this:

{
  path: '/pages/:id',
  name: 'page',
  component: () => import('../views/page.vue'),
  props: true
}

From my understanding, since id is a parameter on my route, I can use the [defineProps][1] method. While the single file component loads, I do not see the id. In addition, when I look in the console log, I see the following:

Uncaught (in promise) ReferenceError: defineProps is not defined

I don't understand why I'm getting this error. Other questions I've seen mention changing ESLINT. However, I'm not using ESLINT in my app. I am using Vite. How do I fix this error?

vue.js javascript
2 Answers

defineProps is a compiler macro for use in <script setup>. The macro gets compiled away, and cannot be inside a lifecycle hook, as you observed with onMounted(). In addition, it doesn't make sense to define props inside onMounted() because the props need to exist before the component mounts.

Props must be declared at the top level of the <script setup> context:

<script setup>
    import { onMounted } from 'vue';
    import { useStore } from '../stores/store';

    const myStore = useStore();

    const props = defineProps({ id:Number }); // ✅

    onMounted(() => {
        // const props = defineProps({ id:Number }); // ❌ move to top level
        console.log(props);
    });
</script>
user_62771510

I had the same error with a much simpler code. I got rid of the error by adding an entry in my package.json (using Webstorm created project...)

"eslintConfig": {
"root": true,
"env": {
  "node": true,
  "vue/setup-compiler-macros": true
},
"extends": [
  "plugin:vue/vue3-essential",
  "eslint:recommended"
]
}

This website helped me fix my issue: ESLint | Fix defineProps

user_23368870
Related