Error running 'php artisan sidecar:deploy --activate'

[michaelfromtheoutfit]

Hey @RobertBoes!

Running into an error when running php artisan sidecar:deploy --activate

   Symfony\Component\Process\Exception\ProcessFailedException 

  The command "'npx' '--yes' '@vercel/ncc' 'build' 'bootstrap/ssr/ssr.mjs' '--out=bootstrap/sidecar-ssr'" failed.

Exit Code: 1(General error)

Working directory: /Users/ME/Sites/PATH

  at vendor/symfony/process/Process.php:267
    263▕      */
    264▕     public function mustRun(callable $callback = null, array $env = []): static
    265▕     {
    266▕         if (0 !== $this->run($callback, $env)) {
  ➜ 267▕             throw new ProcessFailedException($this);
    268▕         }
    269▕ 
    270▕         return $this;
    271▕     }

      +21 vendor frames 
  22  artisan:37
      Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput

Not sure if it's related but my bootstrap/ssr/ssr.mjs file is actually bootstrap/ssr/app.mjs. I tried renaming it, but as soon as I run the script again, it renames the file back.

Also, this is a Jetstream/Inertia build. If there's any other information you'd like me to post, just let me know.

Thanks in advance for any help.

[RobertBoes]

Hey @michaelfromtheoutfit, thanks for reporting this :)

I did indeed set this package up with a default Laravel setup, which creates the SSR file at bootstrap/ssr/ssr.mjs. The script first compiles your assets and then uses npx to bundle it with the node-modules.

Could you share your vite.config.js? I think this could be easily solved by introducing a config value to locate your SSR bundle.

Just to confirm you're not running into any other issues, did you try running npx --yes @vercel/ncc build bootstrap/ssr/app.mjs --out=bootstrap/sidecar-ssr to see if there's no other issues there?

[michaelfromtheoutfit]

Hey @RobertBoes!

Thank you so much for responding.

npx --yes @vercel/ncc build bootstrap/ssr/app.mjs --out=bootstrap/sidecar-ssr runs fine with no errors just the output like:

 124kB  bootstrap/sidecar-ssr/8523.index.mjs
 293kB  bootstrap/sidecar-ssr/5744.index.mjs
 435kB  bootstrap/sidecar-ssr/1684.index.mjs
3208kB  bootstrap/sidecar-ssr/index.mjs
5536kB  [6717ms] - ncc 0.36.1

Which I assume is what is expected.

My vite.config.js looks like:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
    plugins: [
        laravel(
            ["resources/js/app.js"], {
            refresh: true
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./resources/js"),
        },
    },
});

And in case you need it, my resources/js/ssr.js looks like:

import "./bootstrap";
import "../css/app.css";

import { createSSRApp, h } from "vue";
import { renderToString } from "@vue/server-renderer";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import createServer from "@inertiajs/server";
import InstantSearch from "vue-instantsearch/vue3/es";
import VueAutosuggest from "vue-autosuggest";
import MicroModal from "micromodal";
import "vue-toast-notification/dist/theme-sugar.css";
import Vapor from "laravel-vapor";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";

window.Vapor = Vapor;
window.Vapor.withBaseAssetUrl(import.meta.env.VITE_VAPOR_ASSET_URL);

const appName =
    window.document.getElementsByTagName("title")[0]?.innerText ||
    "Producer Presets";

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) =>
            require(`./Pages/${name}`, import.meta.glob("./Pages/**/*.vue")),
        setup({ app, props, plugin }) {
            MicroModal.init();
            return createSSRApp({
                render: () => h(app, props),
            })
                .use(plugin)
                .use(InstantSearch)
                .use(VueAutosuggest)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                })
                .mixin({ methods: { route } })
                .mixin({
                    methods: {
                        asset: window.Vapor.asset,
                    },
                });
        },
    })
);

[RobertBoes]

Right, I think your Vite config might have to be updated, as now it'll use resources/js/app.js for SSR, not resources/js/ssr.js. Could you try the following vite.config.js?

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
// ...

See https://laravel.com/docs/9.x/vite#ssr for more info

[michaelfromtheoutfit]

Update to:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            ssr: "resources/js/ssr.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./resources/js"),
        },
    },
});

But still seems to be getting the same error.

[RobertBoes]

Hmm odd.. With that it should create a bootstrap/ssr/ssr.mjs file

[michaelfromtheoutfit]

Let me run through all the documentation again just in case I've missed something and I'll get back to you. Thank you so much again for taking the time to help.

[michaelfromtheoutfit]

Getting closer I think!

Running php artisan sidecar:deploy --activate now completes with no errors.

Then I run: php artisan inertia:start-ssr which generates no output but also doesn't error (assuming this is normal).

When I try to browse to my application at http://localhost (using Sail) I get the following error:

Lambda Execution Exception for RobertBoes\SidecarInertiaVite\SSRFunction: "index.handler is undefined or not exported. [TRACE] Runtime.HandlerNotFound: index.handler is undefined or not exported at Object.UserFunction.js.module.exports.load

If I try to browse to: http://127.0.0.1:13714/render which is in inertia.php I get a Site cannot be reached error.

And finally - if I try to run php artisan inertia:stop-ssr which I assume would allow me to browse the site in non-SSR mode it says: Unable to connect to Inertia SSR server..

My apologies for all the questions - this is my first time trying to get SSR running. :)

[RobertBoes]

So for the index.handler is undefined or not exported. error you're missing this step: https://github.com/RobertBoes/sidecar-inertia-vite#updating-your-javascript, you'd have to export a handler function that runs SSR, like:

export async function handler(page) {
  return await createInertiaApp({
    // ...
  });
}

Using the Sidecar function essentially replaces the Inertia SSR server, so you don't have to run php artisan inertia:start-ssr (you also shouldn't visit the URL it produces).

This does make developing locally a bit more difficult/tedious, I'm still trying to find a good solution for that, like being able to use the Node SSR server locally and using Sidecar on production

[michaelfromtheoutfit]

Ah! Gotcha. Thank you so much again for all your help @RobertBoes. I really appreciate the assistance.

[michaelfromtheoutfit]

Hey @RobertBoes - so sorry, one last question:

When you say, This does make developing locally a bit more difficult/tedious

What is the process for developing locally in this case?