vue3.3.4 Directive
Vue version
3.3.4
Link to minimal reproduction
/node_module/.vite/deps/vue.js?v=aa92c6f4
Steps to reproduce
my App.vue file code
web page error message: Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=aa92c6f4' does not provide an export named 'Directive' (at App.vue:8:45)
What is expected?
I read vue docs Directive is say give coder use! but I use Directive create my Directive. but you know! yeah I get a error message
What is actually happening?
I see my web page error message: Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=aa92c6f4' does not provide an export named 'Directive' (at App.vue:8:45)
System Info
my computer windows 10 this is my package.json
{
"name": "my-vue-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@vitejs/plugin-vue-jsx": "^3.0.1",
"animate.css": "^4.1.1",
"element-plus": "^2.3.8",
"gasp": "^0.0.2",
"gsap": "^3.12.2",
"mitt": "^3.0.1",
"sass": "^1.64.1",
"typescript": "^5.1.6",
"unplugin-auto-import": "^0.16.6",
"vue": "^3.3.4",
"vue-router": "4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"@vue/babel-plugin-jsx": "^1.1.5",
"vite": "^4.4.5"
}
}
Any additional comments?
No response
my App.vue code is
this is good! Directive in lang="ts" but I think vue3 docs show lang="ts" Directive is good.but lang="js" Directive is no good.
<script setup lang="ts">
import { ref, reactive, Directive, DirectiveBinding } from "vue";
const flag = ref(false);
const vHasShow: Directive = (el, binding) => { console.log(el.value, binding.value); };
const list = ref([1, 2, 3]);
const change = () => { list.value = [4, 5, 6]; };
</script>
The Directive
is a type not a function
in js.
<script setup>
import {ref, reactive, directive} from 'vue'
</script>
the directive should be a function. but the vue not export the function
is this your question ?