Build failed: failed to load config from /app/vite.config.js

Questions / Help Build debugging
1

Hi, I’m trying to build and deploy a Laravel 9 app which is using Vite 4.3. I’m on Node 18 locally and building works fine there. However, when I try to run fly deploy I get this error while building and I can’t seem to figure out how to resolve it:

...
=> ERROR [node_modules_go_brrr 7/7] RUN if [ -f "vite.config.js" ]; then         ASSET_CMD="build";     else         ASSET_CMD="production";     fi;     if [ -f "yarn.lock" ]; then         yarn install -  5.6s
------
 > [node_modules_go_brrr 7/7] RUN if [ -f "vite.config.js" ]; then         ASSET_CMD="build";     else         ASSET_CMD="production";     fi;     if [ -f "yarn.lock" ]; then         yarn install --frozen-lockfile;         yarn $ASSET_CMD;     elif [ -f "pnpm-lock.yaml" ]; then         corepack enable && corepack prepare pnpm@latest-7 --activate;         pnpm install --frozen-lockfile;         pnpm run $ASSET_CMD;     elif [ -f "package-lock.json" ]; then         npm ci --no-audit;         npm run $ASSET_CMD;     else         npm install;         npm run $ASSET_CMD;     fi;:
#17 4.892
#17 4.892 added 124 packages in 4s
#17 4.892
#17 4.892 20 packages are looking for funding
#17 4.892   run `npm fund` for details
#17 4.893 npm notice
#17 4.893 npm notice New minor version of npm available! 9.5.1 -> 9.6.5
#17 4.893 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.6.5>
#17 4.893 npm notice Run `npm install -g npm@9.6.5` to update!
#17 4.893 npm notice
#17 5.307
#17 5.307 > build
#17 5.307 > vite build
#17 5.307
#17 5.583 failed to load config from /app/vite.config.js
#17 5.584 error during build:
#17 5.584 TypeError [ERR_INVALID_URL]: Invalid URL
#17 5.584     at new NodeError (node:internal/errors:399:5)
#17 5.584     at new URL (node:internal/url:560:13)
#17 5.584     at /app/vite.config.js:42:14
#17 5.584     at loadConfigFromFile (file:///app/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64327:15)
#17 5.584     at async resolveConfig (file:///app/node_modules/vite/dist/node/chunks/dep-24daf00c.js:63932:28)
#17 5.584     at async build (file:///app/node_modules/vite/dist/node/chunks/dep-24daf00c.js:46246:20)
#17 5.584     at async CAC.<anonymous> (file:///app/node_modules/vite/dist/node/cli.js:812:9)
------
Error: failed to fetch an image or build from source: error building: executor failed running [/bin/sh -c if [ -f "vite.config.js" ]; then         ASSET_CMD="build";     else         ASSET_CMD="production";     fi;     if [ -f "yarn.lock" ]; then         yarn install --frozen-lockfile;         yarn $ASSET_CMD;     elif [ -f "pnpm-lock.yaml" ]; then         corepack enable && corepack prepare pnpm@latest-7 --activate;         pnpm install --frozen-lockfile;         pnpm run $ASSET_CMD;     elif [ -f "package-lock.json" ]; then         npm ci --no-audit;         npm run $ASSET_CMD;     else         npm install;         npm run $ASSET_CMD;     fi;]: exit code: 1

I have tried to run this with Node 16 as well without any luck.

Any help is greatly appreciated.

Versions:
PHP: 8.1
Laravel: 9.52.6
Node: 18 (resolves to 18.16)
laravel-vite-plugin: 0.7.4

2

Can you show us your vite.config.js? Something was happening at the line 42.

3

Definitely, here it is:

import { defineConfig, loadEnv } from "vite";
import laravel, { refreshPaths } from "laravel-vite-plugin";
import fs from "fs";
import { resolve } from "path";
import { homedir } from "os";

export default defineConfig(({ command, mode }) => {
    // Load current .env-file
    const env = loadEnv(mode, process.cwd(), "");

    // Set the host based on APP_URL
    let host = new URL(env.APP_URL).host;
    let homeDir = homedir();
    let serverConfig = {};

    if (homeDir) {
        serverConfig = {
            https: {
                key: fs.readFileSync(
                    resolve(homeDir, `.config/valet/Certificates/${host}.key`)
                ),
                cert: fs.readFileSync(
                    resolve(homeDir, `.config/valet/Certificates/${host}.crt`)
                ),
            },
            hmr: {
                host,
            },
            host,
        };
    }

    return {
        plugins: [
            laravel({
                input: ["resources/css/app.css", "resources/js/app.js"],
                refresh: [...refreshPaths, "app/Http/Livewire/**"],
            }),
        ],
        server: serverConfig,
    };
});
4

Thanks! And the line 42 is the end of the file…

But the file is calling new URL(env.APP_URL).host and the stacktrace is having the below.

#17 5.584 TypeError [ERR_INVALID_URL]: Invalid URL
#17 5.584     at new NodeError (node:internal/errors:399:5)
#17 5.584     at new URL (node:internal/url:560:13)
#17 5.584     at /app/vite.config.js:42:14

So is APP_URL set? Does it have a vaild URL?

5

Thanks for helping out, @kaz, much appreciated. The APP_URL is set in the fly.toml file with a value of https://my-app-name.fly.dev. Is there anything else I need to set?

6

The env section in fly.toml is used when Fly is running your application. However building its container image is a different process and doesn’t load environment variables from there.

I personally haven’t used Vite, but seems it can load environment variables from .env files. Would it work for you?

7

That’s my bad, I wasn’t aware and explains it. I’ll give it another go and will update you here.