Inertia.js, Laravel, Vue 3, SSR: Could not find one or more icon(s)

[oxygemthe]

Describe the bug The vue component Font-Awesome cannot find the icons during ssr. It works fine in the browser. Response from the server: (Where underlined in yellow there should be an icon)

My ssr.js:

import { createSSRApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import createServer from "@inertiajs/vue3/server";
import { renderToString } from "@vue/server-renderer";
import { ZiggyVue } from '../../../vendor/tightenco/ziggy/dist/vue.m'
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
    faArrowUpRightFromSquare,
    faCircleNotch,
    faMagnifyingGlass,
    faPhone,
    faRightToBracket
} from "@fortawesome/free-solid-svg-icons";

import.meta.glob([
    '../images/**',
    '../fonts/**',
]);

library.add(faRightToBracket, faCircleNotch, faPhone, faMagnifyingGlass, faArrowUpRightFromSquare);

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
        setup({ App, props, plugin }) {
            return createSSRApp({ render: () => h(App, props) })
                .component('font-awesome-icon', FontAwesomeIcon)
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                });
        }
    })
);

Expected behavior Rendering icons on the server.

Desktop (please complete the following information):

• Laravel 10 (php 8.2)
• Inertia.js
• Vue.js 3
• Node.js 20

Additional context composer.json:

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The skeleton application for the Laravel framework.",
    "keywords": ["laravel", "framework"],
    "license": "MIT",
    "require": {
        "php": "^8.1",
        "guzzlehttp/guzzle": "^7.2",
        "inertiajs/inertia-laravel": "^0.6.10",
        "intervention/image": "^2.7",
        "laravel/framework": "^10.10",
        "laravel/sanctum": "^3.2",
        "laravel/tinker": "^2.8",
        "spatie/laravel-sluggable": "^3.5",
        "tightenco/ziggy": "^1.6"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.9",
        "fakerphp/faker": "^1.9.1",
        "laravel/pint": "^1.0",
        "laravel/sail": "^1.18",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^7.0",
        "phpunit/phpunit": "^10.1",
        "spatie/laravel-ignition": "^2.0"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true,
        "allow-plugins": {
            "pestphp/pest-plugin": true,
            "php-http/discovery": true
        }
    },
    "minimum-stability": "stable",
    "prefer-stable": true
}

package.json:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.8.0",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.4.2",
        "@fortawesome/free-brands-svg-icons": "^6.4.2",
        "@fortawesome/free-regular-svg-icons": "^6.4.2",
        "@fortawesome/free-solid-svg-icons": "^6.4.2",
        "@fortawesome/vue-fontawesome": "^3.0.3",
        "@inertiajs/vue3": "^1.0.11",
        "@vitejs/plugin-vue": "^4.3.3",
        "@vue/server-renderer": "^3.3.4",
        "fontawesome-free": "^1.0.4",
        "less": "^4.2.0",
        "nprogress": "^0.2.0",
        "slug": "^8.2.3",
        "tinymce": "6.2.0",
        "vue": "^3.3.4"
    }
}

I hope for your help 😊

[oxygemthe]

Up

[oxygemthe]

SOLUTION: I forgot to add the fontawesome library to ssr noExternal in vite.config.js, here is the code:

ssr: {
        noExternal: ["@fortawesome/*"]
}