Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

srigurubyo's avatar

failed to load config from vite.config.ts

Hi, I am having trouble in using vite and getting below error while running yarn build command. I could not move forward even after spending hours in this blocker. Any help would be greatly appreciated.

Error:

C:\laragon5\www\probelian>yarn build
yarn run v1.22.19
$ vite build
failed to load config from C:\laragon5\www\probelian\vite.config.ts
error during build:
TypeError: artisan.commands is not iterable
    at new ViteConfiguration (C:\laragon5\www\probelian\node_modules\laravel-vite\dist\index.js:238:37)
    at defineConfig (C:\laragon5\www\probelian\node_modules\laravel-vite\dist\index.js:352:10)
    at Object.<anonymous> (C:\laragon5\www\probelian\vite.config.ts:34:64)
    at Module._compile (node:internal/modules/cjs/loader:1120:14)
    at require.extensions.<computed> [as .ts] (C:\laragon5\www\probelian\node_modules\vite\dist\node\chunks\dep-689425f3.js:62006:20)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1022:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadConfigFromBundledFile (C:\laragon5\www\probelian\node_modules\vite\dist\node\chunks\dep-689425f3.js:62014:17)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

My environment:

npm -v => 8.19.2

node -v => 18.7.0

yarn -v => 1.22.19

vite.config.ts

import { defineConfig } from 'laravel-vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    server: {
        watch: {
            ignored: ['**/.env/**'],
        },
    },
    resolve: {
        alias: {
            "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
        }
    }
}).withPlugins(
    vue
)
0 likes
25 replies
Sinnbeck's avatar

Do you have a file named hot in your public directory?

Sinnbeck's avatar

Can you share your package.json. You can delete the composer.json code here on the page as it's php and not js

Also be sure everything is up to date yarn upgrade

srigurubyo's avatar

@Sinnbeck

package.json

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "eslint ./resources/scripts --ext .js,.vue"
  },
  "devDependencies": {
    "@rvxlab/tailwind-plugin-ios-full-height": "^1.0.0",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.4.0",
    "@tailwindcss/typography": "^0.5.0",
    "@vitejs/plugin-vue": "^1.10.0",
    "@vue/compiler-sfc": "^3.2.22",
    "autoprefixer": "^10.4.0",
    "cross-env": "^5.1",
    "eslint": "^7.27.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-vue": "^7.0.0-beta.4",
    "laravel-vite": "^0.0.22",
    "postcss": "^8.4.5",
    "prettier": "^2.3.0",
    "sass": "^1.32.12",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.6",
    "vite": "^2.6.1"
  },
  "dependencies": {
    "@headlessui/vue": "^1.4.0",
    "@heroicons/vue": "^1.0.1",
    "@popperjs/core": "^2.9.2",
    "@stripe/stripe-js": "^1.21.2",
    "@tailwindcss/line-clamp": "^0.3.0",
    "@tiptap/core": "^2.0.0-beta.85",
    "@tiptap/extension-text-align": "^2.0.0-beta.29",
    "@tiptap/starter-kit": "^2.0.0-beta.81",
    "@tiptap/vue-3": "^2.0.0-beta.38",
    "@vuelidate/components": "^1.1.12",
    "@vuelidate/core": "^2.0.0-alpha.32",
    "@vuelidate/validators": "^2.0.0-alpha.25",
    "@vueuse/core": "^6.0.0",
    "axios": "^0.19",
    "chart.js": "^2.7.3",
    "guid": "0.0.12",
    "lodash": "^4.17.13",
    "maska": "^1.4.6",
    "mini-svg-data-uri": "^1.3.3",
    "moment": "^2.29.1",
    "mongodb": "^4.10.0",
    "pinia": "^2.0.4",
    "v-money3": "^3.13.5",
    "v-tooltip": "^4.0.0-alpha.1",
    "vue": "^3.2.0-beta.5",
    "vue-flatpickr-component": "^9.0.3",
    "vue-i18n": "^9.1.7",
    "vue-router": "^4.0.8",
    "vue3-colorpicker": "^1.0.5",
    "vuedraggable": "^4.1.0"
  }
}
srigurubyo's avatar

@Sinnbeck vite version has been upgrade to 3.1.3. But still getting the error.

C:\laragon5\www\probelian>yarn vite -version
yarn run v1.22.19
$ C:\laragon5\www\probelian\node_modules\.bin\vite -version
vite/3.1.3 win32-x64 node-v18.7.0
Done in 0.52s.
srigurubyo's avatar

No such file is found under public directory. Outupt of listing public directory content is pasted below for your kind reference.

C:\laragon5\www\probelian\public>dir
 Volume in drive C is Windows
 Volume Serial Number is 62CD-F4B1

 Directory of C:\laragon5\www\probelian\public

22-09-2022  21:42    <DIR>          .
23-09-2022  19:50    <DIR>          ..
04-08-2022  19:18               624 .htaccess
22-09-2022  21:00    <DIR>          build
04-08-2022  19:18    <DIR>          favicons
04-08-2022  19:18             2,019 index.php
04-08-2022  19:18                26 robots.txt
22-09-2022  21:42    <JUNCTION>     storage [C:\laragon5\www\probelian\storage\app\public]
04-08-2022  19:18               937 web.config
               4 File(s)          3,606 bytes
               5 Dir(s)  342,308,581,376 bytes free
Sinnbeck's avatar

I'm trying to figure out where artisan.commands comes from. Is that inside your own code? It's not anywhere in the plugin

artisan.commands is not iterable

srigurubyo's avatar

@Sinnbeck I am using Laragon for my development on Windows. So with my limited knowledge, I presume it comes from my own project code.

srigurubyo's avatar

@Sinnbeck Can you please elaborate on what to search for in all the files ?

Sorry if my question is very basic. I come from 20+ years of Java experience to Laravel and still have not got hold on the things.

Sinnbeck's avatar

@srigurubyo it's actually Javascript but that's besides the point. The error is "artisan.commands is not iterable" which seems like a typescript error. So my guess is that somewhere in your Javascript files you have artisan.commands

srigurubyo's avatar

@Sinnbeck Got your point. But I do not seem to have any artisan commands in any of my javascript files. I did a full scan.

Sinnbeck's avatar

Or any chance the project is public on github so I can inspect the code myself?

srigurubyo's avatar

@Sinnbeck

Thanks!

Here is the link to the repository and I just marked it's visibility as public. Thanks in advance for your kind help here!

thinkverse's avatar

It's a type defined by the laravel-vite plugin you're using, which is an old version of Innocenzi's Vite plugin.

I'd recommend either switching to Laravel's official Vite plugin if you're using Laravel 9, or if you wanna stick with Innocenzi's Vite plugin, they've actually moved packages and are now located under vite-plugin-laravel, I'd recommend reading the upgrade guide in that case.

Maybe updating to the newest version will fix the issue, usually works.

2 likes
thinkverse's avatar

@Sinnbeck yeah, it's strange when there are 3 versions of a Vite plugin for Laravel to keep track of.

One official, then two non-official which are the same plugin but one of those packages is deprecated, but it's not really deprecated, at least the package isn't tagged as it, but it hasn't seen an update in 8 months šŸ¤·ā€ā™‚ļø

This leaves users who used the old laravel-vite plugin in the dust with updates since the package moved but the author didn't inform them the package is deprecated now.

1 like
Sinnbeck's avatar

@thinkverse ouch. That's some history. I originally only tried it out for an hour, gave up and then wrote my own implementation, so I never really followed it. Just happy there is official support now

thinkverse's avatar

@Sinnbeck laravel-vite has now been marked as deprecated, opened a discussion in the repository and Enzo thought he had already deprecated it, guess he forgot or something. But now there are only two packages to keep track of. šŸ‘

srigurubyo's avatar

Thanks for your comments. I shall try these and get back to you with my observation.

srigurubyo's avatar

I have done the changes per the https://laravel-vite.dev/guide/upgrade.html instructions and hitting below problem.

yarn run v1.22.19
$ vite build
vite v3.1.3 building for production...
āœ“ 0 modules transformed.
You must supply options.input to rollup
error during build:
Error: You must supply options.input to rollup
    at Graph.generateModuleGraph (file:///C:/laragon5/www/probelian/node_modules/rollup/dist/es/shared/rollup.js:22955:19)
    at async Graph.build (file:///C:/laragon5/www/probelian/node_modules/rollup/dist/es/shared/rollup.js:22898:9)
    at async file:///C:/laragon5/www/probelian/node_modules/rollup/dist/es/shared/rollup.js:23689:13
    at async catchUnfinishedHookActions (file:///C:/laragon5/www/probelian/node_modules/rollup/dist/es/shared/rollup.js:23088:20)
    at async rollupInternal (file:///C:/laragon5/www/probelian/node_modules/rollup/dist/es/shared/rollup.js:23686:5)
    at async doBuild (file:///C:/laragon5/www/probelian/node_modules/vite/dist/node/chunks/dep-557f29e6.js:45806:24)
    at async build (file:///C:/laragon5/www/probelian/node_modules/vite/dist/node/chunks/dep-557f29e6.js:45653:16)
    at async CAC.<anonymous> (file:///C:/laragon5/www/probelian/node_modules/vite/dist/node/cli.js:748:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

My updated vite.config.ts

import { defineConfig } from 'vite'
import laravel from 'vite-plugin-laravel'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
       plugins: [
         vue(),
         laravel()
       ],
       
       server: {
        watch: {
            ignored: ['**/.env/**'],
        },
    },
    resolve: {
        alias: {
            "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
        }
    }
       
})

Updated vite.php from the config folder

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Entrypoints
    |--------------------------------------------------------------------------
    | The files in the configured directories will be considered
    | entry points and will not be required in the configuration file.
    | To disable the feature, set to false.
    */
    'configs.default.entrypoints.path' => [
        'resources/scripts/main.js',
    ],
    'configs.default.entrypoints.ignore' => ["/\.d\.ts$/"],

    /*
    |--------------------------------------------------------------------------
    | Aliases
    |--------------------------------------------------------------------------
    | These aliases will be added to the Vite configuration and used
    | to generate a proper tsconfig.json file.
    */
    'aliases' => [
        '@' => 'resources',
    ],

    /*
    |--------------------------------------------------------------------------
    | Static assets path
    |--------------------------------------------------------------------------
    | This option defines the directory that Vite considers as the
    | public directory. Its content will be copied to the build directory
    | at build-time.
    | https://vitejs.dev/config/#publicdir
    */
    'public_directory' => resource_path('static'),

    /*
    |--------------------------------------------------------------------------
    | Ping timeout
    |--------------------------------------------------------------------------
    | The maximum duration, in seconds, that the ping to the development
    | server should take while trying to determine whether to use the
    | manifest or the server in a local environment.
    */
    'configs.default.dev_server.ping_timeout' => .1,

    /*
    |--------------------------------------------------------------------------
    | Build path
    |--------------------------------------------------------------------------
    | The directory, relative to /public, in which Vite will build
    | the production files. This should match "build.outDir" in the Vite
    | configuration file.
    */
    'configs.default.build_path' => 'build',

    /*
    |--------------------------------------------------------------------------
    | Development URL
    |--------------------------------------------------------------------------
    | The URL at which the Vite development server runs.
    | This is used to generate the script tags when developing.
    */
    'configs.default.dev_server.url' => 'http://localhost:3000',
];
Sinnbeck's avatar

@srigurubyo I can see you installed vite-plugin-laravel instead of laravel-vite-plugin. I would personally go with the official plugin. I have no experience with the other

srigurubyo's avatar

Thanks @sinnbeck and @thinkverse for your time and help so far. Unfortunately nothing seem to be working.

I shall take different route this time.

Thanks again!

Please or to participate in this conversation.