vue3.3.4 Directive

[pythonliuwei-root]

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

<script setup> import {ref, reactive, directive} from 'vue' </script> <style scopred> </style>

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

[pythonliuwei-root]

my App.vue code is

change

<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> <style scopred></style>

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.

[yangliguo7]

<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 ?