vue3開発環境構築でエラー vite不認識が原因か

Question

前提

vscodeでvue3の開発環境を構築しています。
npm init vue@latest --save-dev
npm install --save-dev
npm run dev
の順で実行後に下記エラーが発生しました。

package.json内では
このようにviteを起動するようになっているようです。
"scripts": {
"dev": "vite"
}

実現したいこと

viteを認識し、開発用サーバーを起動したい
ご教授いただけないでしょうか。

発生している問題・エラーメッセージ

failed to load config from C:\●●●\●●●\●●●\●●●\Vue学習\hello-vue\vite.config.ts
error when starting dev server:
Error: Cannot find module 'node:url'
Require stack:
- C:\●●●\●●●\●●●\JS_practice\Vue学習\hello-vue\vite.config.ts
- C:\●●●\●●●\●●●\JS_practice\Vue学習\hello-vue\node_modules\vite\dist\node\chunks\dep-4da11a5e.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (C:\●●●\●●●\●●●\JS_practice\Vue学習\hello-vue\vite.config.ts:32:23)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object._require.extensions.<computed> [as .js] (file:///C:/●●●/●●●/●●●/JS_practice/Vue%E5%AD%A6%E7%BF%92/hello-vue/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63537:24)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello-vue@0.0.0 dev: `vite`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello-vue@0.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\●●●\●●●\AppData\Roaming\npm-cache\_logs\2022-10-15T10_31_57_181Z-debug.log

該当のソースコード

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

試したこと

エラー内容を確認し、vite.config.ts内の 'node:url'を'./node_modules'に
してみたのですが、間違っているようで、この変更した行がエラーと指摘されました。

補足情報（FW/ツールのバージョンなど）

・ npm v6.14.14
・ node v14.17.5
・ vite 3.1.8

Answer 1

以下の環境で試してみましたが、一応起動しました。

Windows10
node v16.14.0
npm 8.3.1

package.json

{
 "name": "hello-vue",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
    "vue": "^3.2.38"
  },
  "devDependencies": {
    "@types/node": "^16.11.56",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vue/tsconfig": "^0.1.3",
    "npm-run-all": "^4.1.5",
    "typescript": "~4.7.4",
    "vite": "^3.0.9",
    "vue-tsc": "^0.40.7"
  }
}

Comments

[skillUp]

nodeを新しいバージョンにしてみようと思っていました。
インストールしなおしたら
うまくいきました。
ありがとうございます。