app.js name variable undefined

[RalfHei]

Problem description:

const app = createApp({
    render: () =>
        h(App, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: name => pages[`./Pages/${name}.vue`].default
        }),
});

Error:

Cannot read properties of undefined (reading 'default')

I did some digging and found that the issue comes from InertiaStatamic.php

public function handle(Request $request, Closure $next)
    {
        $page = app(FrontendController::class)->index($request);
      
        if ($page->augmentedValue('template') === 'app' && ($page instanceof Page || $page instanceof Entry)) {
            return Inertia::render(
                $this->buildComponentPath($page),
                $this->buildProps($page)
            );
        }

        return $next($request);
    }

$page->augmentedValue('template') === 'app' => Always returns false

Possible fix

Got it working by adding raw()

$page->augmentedValue('template')->raw() === 'app' => Returns true if app template exists.

Thanks!