Vue.jsをインストール後createしただけでエラーが出ました

実現したいこと

VSCode上でVue CLIを動かし、プロジェクトを作成したいです。

発生している問題・分からないこと

vueをインストール後、vue create hello-vue でそのままテストプロジェクトを作成しようとしたところエラーが吐かれました。
hello-vueのフォルダ以下様々なファイルは作成されているようですが、createが完了できていないのでしょうか。ビルドももちろん通りませんでした。

エラーメッセージ

error
1
2  0:0  error  Parsing error: [BABEL] /home/~~~/hello-vue/babel.config.js: Unexpected token '.' (While processing: "/home/~~~/hello-vue/node_modules/@vue/cli-plugin-babel/preset.js")
3
4
5  0:0  error  Parsing error: [BABEL] /home/~~~/hello-vue/src/App.vue: Unexpected token '.' (While processing: "/home/~~~/hello-vue/node_modules/@vue/cli-plugin-babel/preset.js")
6
7
8  0:0  error  Parsing error: [BABEL] /home/~~~/hello-vue/src/components/HelloWorld.vue: Unexpected token '.' (While processing: "/home/~~~/hello-vue/node_modules/@vue/cli-plugin-babel/preset.js")
9
10
11  0:0  error  Parsing error: [BABEL] /home/~~~/hello-vue/src/main.js: Unexpected token '.' (While processing: "/home/~~~/hello-vue/node_modules/@vue/cli-plugin-babel/preset.js")
12
13  0:0  error  Parsing error: [BABEL] /home/~~~/hello-vue/vue.config.js: Unexpected token '.' (While processing: "/home/~~~/hello-vue/node_modules/@vue/cli-plugin-babel/preset.js")

該当のソースコード

package.json
1{
2  "name": "hello-vue",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "serve": "vue-cli-service serve",
7    "build": "vue-cli-service build",
8    "lint": "vue-cli-service lint"
9  },
10  "dependencies": {
11    "core-js": "^3.8.3",
12    "vue": "^3.2.13"
13  },
14  "devDependencies": {
15    "@babel/core": "^7.12.16",
16    "@babel/eslint-parser": "^7.12.16",
17    "@vue/cli-plugin-babel": "~5.0.0",
18    "@vue/cli-plugin-eslint": "~5.0.0",
19    "@vue/cli-service": "~5.0.0",
20    "eslint": "^7.32.0",
21    "eslint-plugin-vue": "^8.0.3"
22  },
23  "eslintConfig": {
24    "root": true,
25    "env": {
26      "node": true
27    },
28    "extends": [
29      "plugin:vue/vue3-essential",
30      "eslint:recommended"
31    ],
32    "parserOptions": {
33      "parser": "@babel/eslint-parser"
34    },
35    "rules": {}
36  },
37  "browserslist": [
38    "> 1%",
39    "last 2 versions",
40    "not dead",
41    "not ie 11"
42  ]
43}
44

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

AIに聞いてみたところ、babelのバージョンが合っていない旨を聞きましたが、提案されたコマンド
rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm install
を試しても変化ありませんでした。

npm update -g @vue/cliも試しましたが変化ありませんでした。

一度アンインストールして再インストールも試しましたが同じ上記のエラーが再発しています。

補足

createの途中でエラーになる質問が見当たらなかったため、こちらにて質問させていただきました。
vueほかweb関連は初心者なため、知識をご教授いただけますと幸いです。
不足情報がありましたらコメント等お願いいたします。

環境
OS:Ubuntu 22.04.5 LTS
VSCode
@vue/cli 5.0.8

npm outdatedを実行しても、以下の内容しか出てこないのですが、関係ありますでしょうか？
Package Current Wanted Latest Location Depended by
eslint 7.32.0 7.32.0 9.12.0 node_modules/eslint hello-vue
eslint-plugin-vue 8.7.1 8.7.1 9.29.0 node_modules/eslint-plugin-vue hello-vue

juner

2024/10/18 05:55

vue 公式だと `npm create vue@latest` で作成となっておりますが、メンテナンスモードである vue-cli を使うというのでしょうか？ https://ja.vuejs.org/guide/quick-start.html

machoman29

2024/10/18 06:11

コメントありがとうございます。特にこだわりはないのですが知識不足で、調べていて見つかった`npm create hello-vue` を使用していました。 `npm create vue@latest` で実行したところ、下記のエラーになりました。 /home/---/.npm/_npx/2f7e7bff16d1c534/node_modules/create-vue/outfile.cjs:3616 deepMerge2(pkg.devDependencies, config.devDependencies ?? {}); ^ SyntaxError: Unexpected token '?'