Failed to load config from \Project\vuejs-frontend\vite.config.js: VueJS

Question

My Project was running fine yesterday but after revisiting project today I came across this error when trying to run the project.

Here is my vite.config.js file:

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

Here is the error I'm getting:

failed to load config from C:\Users\Desktop\Learn\Project\vuejs-frontend\vite.config.js
error when starting dev server:
Error: The service was stopped
    at C:\Users\Desktop\Learn\Project\vuejs-frontend\node_modules\esbuild\lib\main.js:1337:25
    at C:\Users\Desktop\Learn\Project\vuejs-frontend\node_modules\esbuild\lib\main.js:666:9
    at Socket.afterClose (C:\Users\Desktop\Learn\Project\vuejs-frontend\node_modules\esbuild\lib\main.js:644:7)
    at Socket.emit (node:events:539:35)
    at endReadableNT (node:internal/streams/readable:1345:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

Please share with me any helpful tips you know. Thank you

Answer 1

Please check your node version, in my case i update my node version {node: 'v14.17.6'} as showed bellow, and everything goes well.

--- Log --- package: 'vite@3.0.2', required: { node: '^14.18.0 || >=16.0.0' }, current: { node: 'v14.17.6', npm: '8.15.0' }

Hope it help

Answer 2

Pls download the latest version of node js https://nodejs.org/en/download/

Answer 3

The error seems to stem from fact that laravel uses vite 2 while current vite is 3 and yet seems jetstream just installs latest dependencies without considering such. Hence you have to manually try out versions that play well with each other. Currently what worked for me is:

    "@vitejs/plugin-vue": "^2.3.3",
    "laravel-vite-plugin": "^0.2.1",
    "vite": "^2.9.11",
    "vue": "^3.2.31"
    "tailwindcss": "^3.1.0",

it seems the laravel-vite-plugin are laravel-vite-plugin dependencies are the most conflicting.

To make the changes you can edit the package.json and run npm install or npm install the specific packages specifying the version get installation the link from npm for correct format.

This held me down for quite some hours. Thing is not even about node as above answer as myself was on 16.17, though check on that too, upgrading node ended up in up in more problems about openssl because i had postgres installed too which adds the config in path. I did not want to touch that. After fidgeting around creating separate project and installing breeze separately i caught the error.

I got a hint of whats going on from this tweet from Povilas of Laravel daily after hours of scouring the inte.net.

Question is similar to mine if am not wrong:

check it out

Answer 4

If you are running a newer verison of node.js, I am running 18.x and still want to use Vite, then adapt your code a little bit.

change the code that sets the export default

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
    }
  }
})

to be

  const defineConfig = ({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
    }
  }
});
export default defineConfig;

basically you are setting defineConfig to be a constant and then exporting that. It works fine on any version of node.js

Answer 5

I´m having the same problem but haven´t been able to solve the problem, I thought the problem may have been mine node version but I have 16.17.0.

this is how my vite.config.js file looks:

     import { defineConfig } from "vite";
     import react from "@vitejs/plugin-react";

        export default defineConfig({
           plugins: [react()],
      });