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.

Sedum

Just try to delete node_modules, and install again – Shroff

@MichalLevý I tried it a lot of times,but still the same error,also changed node version back and forth but still the same error. – Sedum

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

Sedum

Answer 2

This happened to me too.

I apparently made a package-lock.json with an older version of npm.

Just letting people know that this could also be causing the same issue.

Applaud

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Emmenagogue

Answer 3

I had the same problem and I tried all means but what solved was the needed to update nodejs on pc, after update to make sure that have the updated version by using the cmd> node -v in the terminal or command prompt.

Sometimes we have more than one working installation of nodejs...

Iand

Answer 4

just go to terminal and type npm install once.Error will go

Shimkus

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Stagestruck

Answer 5

I have the same problem here as well. It seems that the output would optimize for browser execution and modules like "path, fs and all so on" do not exist for the browser. Which makes sense, because it's part of nodejs itself. It can't work within a browser. That's my assumption so far.

Take a look at the various solutions to understand why I made those assumptions.

https://github.com/vitejs/vite/discussions/6849 https://github.com/vitejs/vite/issues/7821#issuecomment-1142328698

https://github.com/marcofugaro/browserslist-to-esbuild https://esbuild.github.io/getting-started/

Given this information, I prefer a simpler solution to prevent a build failure with Vite as the bundler.

Configure rollupOptions

I think the simplest solution is to define externals. https://rollupjs.org/configuration-options/#external

import { resolve } from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            name: 'myLib',
            fileName: 'myLib',
        },
        rollupOptions: {
            external: [/^node:\w+/], // <-- ignores all 'node:*'
        },
    },
});

Kentish

Answer 6

This works for me. You just Needs to Del node_modules folder then install it , 'npm i' it will work

Pedestrianize

This answer is (essentially) already listed. – Foxing

Answer 7

You just Needs to Del node_modules folder then install it , 'npm i / yarn' it will work

Falito

This has already been discussed in the comment section on the question itself – Mismanage

Answer 8

In my case two files were created while installing

vite.config.js vite.congig.ts

JS file was empty. I copied content from TS to JS and the problem was solved.

Jerri