How do I get the @inertia directive to work in InertiaJS with Laravel?

I'm new to InertiaJS and I'm having trouble getting it to work on my production environment. It seems the @inertia directive in my Blade template is not recognized, it just gets rendered literally on the page. It just shows "@inertia" in the browser, inside the <body>.

On my local dev environment, the page loads as expected and I see the component. So I have all the frontend adapters and set up my app.blade.php and app.js according to the docs.

Using PHP 8.0, Laravel 7.30.4, InertiaJS 0.9.2.

// app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
    <title></title>
</head>
<body>
    @inertia
</body>
</html>

// app.js

import { createInertiaApp } from '@inertiajs/inertia-svelte'

createInertiaApp({
    resolve: name => require(`./Pages/${name}.svelte`),
    setup({ el, App, props }) {
        new App({ target: el, props })
    },
})

When I replace the @inertia directive with the exact <div id="app" ...></div> I get on my dev environment, everything works and I see the component.

The only console error is Uncaught (in promise) TypeError: Cannot read property 'dataset' of null at resolve (app.js [...]), but I guess that's to be expected if the <div id="app" ...></div> is not there. There are no server-side errors in the log.

What am I missing?

Solution

I had THE EXACT same problem on a production environment. For me, this was a caching issue. Give it a try:

composer dump-autoload
php artisan cache:clear
php artisan config:clear
php artisan view:clear