hocu's avatar
hocu
OP
2 years ago
Level 1

Markdown Mail message component not rendering

Hi

I'm having some issues with markdown mail components not being rendered. When I test my email it just shows the raw message component code.

My Laravel version is 10 and the components that I'm using at the moment are the ones from Laravel, published with

php artisan vendor:publish --tag=laravel-mail

I have the following code:

Controller:

public function testMails(Request $request) {
    $user = Auth::user();
    $order = $user->latestOrder;

    return new InvoicePaid($order);
}

Mail content function:

public function content(): Content
    {
        return new Content(
            markdown: 'emails.invoice-paid',
            with: [
                'url' => 'test',
            ],
        );
    }

Mail view:

<x-mail::message>
# Invoice paid
 
Your invoice has been paid!
 
<x-mail::button :url="$url">
View invoice
</x-mail::button>
 
Thanks,<br>
{{ config('app.name') }}
</x-mail::message>

The result that I get in the browser is the following:

<:message style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;"> # Order Shipped Your order has been shipped! <:button :url="$url" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;"> View Order Thanks,
{{ config('app.name') }}

So it seems to be doing something, but by far not the desired result. FYI, I'm using Visual Studio Code and made sure auto formatting is off to avoid indentation issues in the markdown files.

Anyone that has an idea what might be going wrong here?

Thanks!

0 likes
5 replies
aknEvrnky's avatar

did you clean the view cache?

php artisan view:clear

Also any tab or space at the start of the line may cause that in view file.

hocu's avatar
hocu
OP
2 years ago
Level 1

@aknEvrnky Thanks for the reply.

Yes I've cleaned the cache and I've made sure no tabs or spaces are present at the start of any lines. I don't think that's the issue here. See answer below with further findings.

hocu's avatar
hocu
OP
2 years ago
Level 1

Doing some further research, I've noticed that the base layout template that's being used is not the one Laravel normally uses.

When previewing the mail, the following html is outputted:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -webkit-text-size-adjust: none; background-color: #ffffff; color: #718096; height: 100%; line-height: 1.4; margin: 0; padding: 0; width: 100% !important;"><:message style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
# Order Shipped
 
Your order has been shipped!
 
<:button :url="$url" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
View Order
</:button>
 
Thanks,<br>
{{ config('app.name') }}
</:message></body></html>

However, when looking at the layout.blade.php the html and head tags are:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{{ config('app.name') }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<style>
@media only screen and (max-width: 600px) {
.inner-body {
width: 100% !important;
}

.footer {
width: 100% !important;
}
}

@media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
</style>
</head>

I have absolutely no idea why it is generating this html instead of the one in the layout.blade.php. I've double checked the mail.php config file but everything looks fine there:

'markdown' => [
        'theme' => 'default',

        'paths' => [
            resource_path('views/vendor/mail'),
        ],
    ],

Please or to participate in this conversation.