Why I got npm error under custom component?

In laravel 11 app I have a custom component , which use inertia js and when running npm under I got error:

master@master-at-home:/var/www/Project/components/laravel-custom-main$ npm run dev

> dev
> vite

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
failed to load config from /var/www/Project/components/laravel-custom-main/vite.config.js
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module /var/www/Project/node_modules/laravel-vite-plugin/dist/index.js from /var/www/Project/components/laravel-custom-main/vite.config.js not supported.
Instead change the require of index.js in /var/www/Project/components/laravel-custom-main/vite.config.js to a dynamic import() which is available in all CommonJS modules.
    at _require.extensions.<computed> [as .js] (file:///var/www/Project/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:54530:9)
    at Object.<anonymous> (/var/www/Project/components/laravel-custom-main/vite.config.js:37:42)
    at _require.extensions.<computed> [as .js] (file:///var/www/Project/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:54528:16)
master@master-at-home:/var/www/Project/components/laravel-custom-main$ npm run build

> build
> vite build

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
failed to load config from /var/www/Project/components/laravel-custom-main/vite.config.js
error during build:
Error [ERR_REQUIRE_ESM]: require() of ES Module /var/www/Project/node_modules/laravel-vite-plugin/dist/index.js from /var/www/Project/components/laravel-custom-main/vite.config.js not supported.
Instead change the require of index.js in /var/www/Project/components/laravel-custom-main/vite.config.js to a dynamic import() which is available in all CommonJS modules.
    at _require.extensions.<computed> [as .js] (file:///var/www/Project/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:54530:9)
    at Object.<anonymous> (/var/www/Project/components/laravel-custom-main/vite.config.js:37:42)
    at _require.extensions.<computed> [as .js] (file:///var/www/Project/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:54528:16)
master@master-at-home:/var/www/Project/components/laravel-custom-main$

In components/laravel-custom-main/package.json I see ""vite": "^4.0.":

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@headlessui/vue": "^1.7.16",
        "@heroicons/vue": "^2.0.18",
        "@inertiajs/vue3": "^1.0.14",
        "@tailwindcss/forms": "^0.5.7",
        "@types/lodash": "^4.14.202",
        "@typescript-eslint/eslint-plugin": "^6.19.0",
        "@typescript-eslint/parser": "^6.19.0",
        "@vitejs/plugin-vue": "^4.5.2",
        "@vue/server-renderer": "^3.2.31",
        "@vueuse/components": "^10.7.2",
        "@vueuse/core": "^10.4.1",
        "autoprefixer": "^10.4.16",
        "axios": "^1.6.2",
        "country-code-emoji": "^2.3.0",
        "eslint": "^8.50.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-tailwindcss": "^3.14.0",
        "eslint-plugin-unused-imports": "^3.0.0",
        "eslint-plugin-vue": "^9.20.1",
        "floating-vue": "^2.0.0-beta.24",
        "laravel-vite-plugin": "^0.8.1",
        "lodash": "^4.17.21",
        "mitt": "^3.0.1",
        "momentum-modal": "^0.2.1",
        "os": "^0.1.2",
        "path": "^0.12.7",
        "postcss": "^8.4.32",
        "postcss-nesting": "^12.0.1",
        "prettier": "^3.0.3",
        "prettier-plugin-tailwindcss": "^0.5.4",
        "sass": "^1.68.0",
        "tailwindcss": "^3.3.6",
        "twemoji": "^14.0.2",
        "typescript": "^5.0.2",
        "unplugin-auto-import": "^0.16.6",
        "unplugin-vue-components": "^0.25.2",
        "unplugin-vue-define-options": "^1.4.1",
        "vite": "^4.0.0",
        "vite-plugin-eslint": "^1.8.1",
        "vite-plugin-watch": "^0.2.0",
        "vue": "^3.3.11",
        "vue-select": "^4.0.0-beta.6",
        "vue-toastification": "^2.0.0-rc.5",
        "vue-tsc": "^1.2.0",
        "vue3-tabs-component": "^1.3.7",
        "ziggy-js": "^2.1.0"
    }
}

in my Kubuntu 22.04 :

master@master-at-home:/var/www/Project/components/laravel-custom-main$ node -v
v21.7.3
master@master-at-home:/var/www/Project/components/laravel-custom-main$ npm -v
10.5.0

Incompatible versions ?

I try to read related https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated article, but not sure is it the issue?