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'

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

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.

• javascript
• node.js
• vue.js
• vite

• Just try to delete node_modules, and install again – Michal Levý Commented Aug 18, 2022 at 19:30
• @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. – Lwin Moe Hein Commented Aug 18, 2022 at 19:38

9 Answers 9

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

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.

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.

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

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

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

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

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

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.