javascriptnode.jsvue.jsvite

vite failed to load config from vite.config.js,

I created a new vue app by doing these (according to vue docs)

  1. npm init vue@latest
  2. npm install

Then I try to run npm run dev.Then this happened.

enter image description here

My environments are these

My package.json

{
  "name": "vue-project",
  "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"
  }
}

My vite.config.js

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))
    }
  }
})

I have been searching for a while now but no avail.Thanks in advance.

Solution

  • Finally I found the solution. The problem was because of the package.json file conflict. Vite is using the wrong package.json file located in the Project's parent directory instead of project's own package.json file.Like this -

    So delete the wrong file and the problem will be fixed.

    Thanks to this github issue answer package.json:1:0: error: Unexpected end of file