CODEWITHSUNDEEP
javascriptnode.jsvue.jsvite
Lwin Moe Hein
Lwin Moe Hein

Reputation: 509

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.

Upvotes: 14

Views: 40521

Answers (10)

Adib Ahbab
Adib Ahbab

Reputation: 9

  • Delete package-lock.json and node_modules
  • Again run command: npm install

Done! It worked for me

Upvotes: 0

Rishabh Singh
Rishabh Singh

Reputation: 903

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.

Upvotes: 3

Mary N
Mary N

Reputation: 117

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.

Upvotes: 0

blankhang
blankhang

Reputation: 23

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

Upvotes: 1

Waseem Programmer
Waseem Programmer

Reputation: 1

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

Upvotes: 0

shivendra deep
shivendra deep

Reputation: 21

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

Upvotes: 1

csscorrea
csscorrea

Reputation: 11

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...

Upvotes: 1

Drewbies
Drewbies

Reputation: 31

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.

Upvotes: 3

Marcel Armada-Castellon
Marcel Armada-Castellon

Reputation: 206

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:*'
        },
    },
});

Upvotes: 0

Lwin Moe Hein
Lwin Moe Hein

Reputation: 509

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

Upvotes: 11

Related Questions