javascript - vuejs sample app npm run dev not working throwing Error: Cannot find module 'node:url' - Stack Over

admin管理员组

文章数量:1278917

I am new to vuejs I am following the below steps to create my vue js app in the local system.

Step:

npm init vue@latest

✔ Project name: … VueDemo ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./VueDemo Done.

cd VueDemo npm install npm run dev

It's throwing the following error in the console:

failed to load config from /Users/ashok/MyStudy/Vue/VueDemo/vite.config.js error when starting dev server: Error: Cannot find module 'node:url' Require stack:

• /Users/ashok/MyStudy/Vue/VueDemo/vite.config.js
• /Users/ashok/MyStudy/Vue/VueDemo/node_modules/vite/dist/node/chunks/dep-0fc8e132.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. (/Users/ashok/MyStudy/Vue/VueDemo/vite.config.js:31:23) at Module._pile (internal/modules/cjs/loader.js:1072:14) at Object._require.extensions. [as .js] (file:///Users/ashok/MyStudy/Vue/VueDemo/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:63096: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)

Package.json file:

{
  "name": "vuedemo",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.1",
    "vite": "^3.0.4"
  }
} 

vite.config.js:

import { fileURLToPath, URL } from 'node:URL

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

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

I am new to vuejs I am following the below steps to create my vue js app in the local system.

Step:

npm init vue@latest

✔ Project name: … VueDemo ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./VueDemo Done.

cd VueDemo npm install npm run dev

It's throwing the following error in the console:

failed to load config from /Users/ashok/MyStudy/Vue/VueDemo/vite.config.js error when starting dev server: Error: Cannot find module 'node:url' Require stack:

• /Users/ashok/MyStudy/Vue/VueDemo/vite.config.js
• /Users/ashok/MyStudy/Vue/VueDemo/node_modules/vite/dist/node/chunks/dep-0fc8e132.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. (/Users/ashok/MyStudy/Vue/VueDemo/vite.config.js:31:23) at Module._pile (internal/modules/cjs/loader.js:1072:14) at Object._require.extensions. [as .js] (file:///Users/ashok/MyStudy/Vue/VueDemo/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:63096: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)

Package.json file:

{
  "name": "vuedemo",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.1",
    "vite": "^3.0.4"
  }
} 

vite.config.js:

import { fileURLToPath, URL } from 'node:URL

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

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

• javascript
• vue.js

Share Improve this question Follow asked Sep 2, 2022 at 18:24 AshokAshok 4111 silver badge22 bronze badges 1

• 2 This means that you have Node version that is too old. Use up to date stable version, 16 or 18 – Estus Flask Commented Sep 2, 2022 at 18:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Try using:

node version 18.12.1 or above and npm version 9.2.0 or above

after that try:

npm install

Just upgrade your node to the latest, remove node_modules, and run npm install again.

The above answers don't work for me. Even though I had the latest version of Node and NPM, I got this error. Execute the below line in the terminal or CMD; it works for me.

Reason for the Error : This might be due to a missing type declaration for Node.js in your project.

npm install @types/node --save-dev

I use npx for most of the cases to build, run etc.., can you try this in your terminal npx vite

本文标签：