How to fix 'defineConfig is not a function' error? - vue.js

Question

I have npm 8.1.2 version installed. I created Vue2 project. All worked fine until I have installed Vuetify2 (npm add vuetify). Now, when I start the app using npm run serve the following error comes up:
ERROR Error loading D:\XYZ\project\vue.config.js:
ERROR TypeError: defineConfig is not a function TypeError:
defineConfig is not a function
I upgraded all existing packages to the newest versions:
{
"name": "project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.26.0",
"npm-check-updates": "^16.3.15",
"vue": "^3.2.41",
"vue-router": "^4.1.5",
"vuetify": "^2.6.12",
"vuex": "^4.1.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~5.0.8",
"#vue/cli-plugin-router": "~5.0.8",
"#vue/cli-plugin-vuex": "~5.0.8",
"#vue/cli-service": "~5.0.8",
"sass": "~1.55.0",
"sass-loader": "^13.1.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-template-compiler": "^2.7.13",
"vuetify-loader": "^1.9.2"
}
}
and my vue.config.js looks like this:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
]
})
I don't know where the problem is. I also have another Vue2+Vuetify2 project (which I created a few months ago) which works fine when I run it with npm run serve. But the new one is not working.