Question 112030 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – 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

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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:*'
        },
    },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search