vite cannot load configuration from vite.config.js,

Question

I created a new vue application by doing these operations (according to vue documentation)

1. npm init vue@latest
2. npm install

Then I tried to run npm run dev. And then this happened.

My environment is these

• Operating System => 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've been searching for a while with no results. Thanks in advance.

Answer 1

I have the same problem here. It looks like the output is optimized for browser execution and modules such as "path, fs, etc." do not exist for the browser. This makes sense since it is part of Nodejs itself. It doesn't work in the browser. This is my assumption so far.

Look at the various solutions to understand why I made these 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 would prefer a simpler solution to prevent build failures using Vite as a bundler.

Configuration rollupOptions

I think the simplest solution is to define external. 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:*'
        },
    },
});

Answer 2

Finally found a solution. The problem is caused by package.json file conflict. Vite used an incorrect package.json file located in the project's parent directory instead of the project's own package.json file. like this -

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

So delete the wrong files and the problem will be solved.

Thanks for the answer to this github question package.json:1:0: Error: Unexpected end of file