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

Question

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.

My environments are these

• OS => Ubuntu
• Node version => 18.7.0
• npm version => 8.15.0

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.

Answer 1

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 -

• ~/package.json ( wrong file )
• ~/Projects/VueProject/package.json ( correct file )

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

Answer 2

Update: Dec 2024

The latest version of vite is having build issues. The current version is 6 series.

You can use the version 5 for now, it'll fix the issue.

I am using this: "vite": "^5.4.10"

You can keep an eye on vite's github repo for latest resolves.