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?
Try to change from:
"vite": "^4.0.0",
Into:
"vite": "^6.0.0",
Then run:
composer i
Also, see if you miss anything from the steps mentioned at: https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated