Level 122
Rest assured there is no such setting.
What is in the view file ?
What editor have you used on the code?
Apr 14, 2021
19
Level 3
Laravel is adding <br> to my page source
I'm implementing Laravel 8 + Jetstream. Suddenly it's started adding <br /> tags throughout the generated html. Clearly I've changed a setting somewhere, but don't know what. Does anyone have any ideas?
For example, here's the page heading output by my application, creating using the layouts.app view (excuse the indenting - I wanted to copy and paste the actual generated html here):
<!-- Page Heading -->
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h2 class="font-semibold text-xl text-gray-800 leading-tight"><br />
Dashboard<br />
</h2>
</div>
</header>
And here's the equivalent piece of code from the original installation of Laravel 8 + Jetstream:
<!-- Page Heading -->
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Dashboard
</h2>
</div>
</header>
Level 3
Hi Snapey. Thanks for responding.
The view file is as delivered by Laravel, namely:
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
The code calling it is:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
...
</x-app-layout>
I'm editing in VS Code on a Windows box with various plug-ins which support Laravel.
Level 122
Have you done anything with language translation files?
Level 3
Nothing has changed that I know of, and I never had this problem before. Everything worked okay until a point in time this morning then suddenly this started happening. It only happens in this version of the application - if I run based on my original install of the products everything is still fine.
Sadly, as I was in the middle of migrating the code to the new framewiork, I don't have a reliable commit in my repo. Having spent all morning trying various things to eliminate possible causes. I've now decided to restore from backup and hope it goes away ... and doesn't come back.
Level 34
@nicks do you really need {{ __('Dashboard') }}? Does Dashboard not enough or your app supports multi language?
Level 34
@nicks I also found this. From your app/Providers/AppServiceProvider.php remove this Blade::setEchoFormat('nl2br(e(%s, true))'); if you had that.
Level 3
@neilstee Thanks very much for your suggestions.
The {{ __('Dashboard') }} tag is not the issue, as the problem is prevalent throughout the Blade template, and not just at this point - I simply copied and pasted this code as an example. Also if I replace this tag with text entered directly, as you suggest, the problem does not go away.
I have tested removing the Blade::setEchoFormat() statement from AppServiceProvider.php, but sadly this had no effect either.
Level 3
Level 34
@nicks when you know what was the issue, kindly share it here as well so others can learn from it 😉
Level 3
I certainly will.
The problem keeps recurring but randomly and I don't yet understand why.
Yesterday the issue was occurring in the Dashboard screen (of Jetstream).
I restored to backup and it was resolved. Then carfully re-applied my changes. Dashboard screen okay, but I then discovered the problem was occurring in the Login screen.
Restored back to a base Laravel + Jetstream + Spark installation again. Once again all okay. Made a few changes, but now the problem is occuring in the Team Settings page. Dashboard and Login are fine.
This is starting to concern me now due to how easily it is happening and how it is happening on different views each time.
Level 34
@nicks not sure but check your browser plugin as well? Something might be running on your browser that messes up the DOM?
Basically, try it on a different browser and see if it still persists.
Level 3
Sadly it doesn't appear to be related to plugins. I tried Firefox, Chrome with all extensions switched off, and even IE. Also, examination of the response to the HTTP call for the page shows the issue, so it definitely seems to be server-side.
Looking at the html generated from the Team Settings view this time. It definitely looks like it's doing something like nl2br() on the code (but to be clear, it's not AppServiceProvider that's doing it) - even to the extent of splitting up tokens (see the at the end of the following snippet.
However, in the Team Settings page it's not doing it on all lines. Here's a section of the generated code showing both <br /> at the end of some lines but not others:
<div class="mt-5 md:mt-0 md:col-span-2">
<form wire:submit.prevent="addTeamMember">
<div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6"><br />
<div class="max-w-xl text-sm text-gray-600"><br />
Please provide the email address of the person you would like to add to this team.<br />
</div><br />
</div><br />
<br />
<!-- Member Email --><br />
<div class="col-span-6 sm:col-span-4"><br />
<label class="block font-medium text-sm text-gray-700" for="email"><br />
Email<br />
</label><br />
<input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full" id="email" type="email" wire:model.defer="addTeamMemberForm.email"><br />
</div><br />
<br />
<!-- Role --><br />
<div class="col-span-6 lg:col-span-4"><br />
<label class="block font-medium text-sm text-gray-700" for="role"><br />
Role<br />
</label><br />
<br />
<div class="relative z-0 mt-1 border border-gray-200 rounded-lg cursor-pointer"><br />
<button type="button" class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue rounded-b-none"<br />
wire:click="$set('addTeamMemberForm.role', 'admin')"><br />
Once again, confusion reigns as the code snippet I showed in the original ticket is correctly rendered on this page (i.e. without line breaks)
Level 34
@nicks can you check your middleware? Try disabling some and see if you can find it.
Level 3
All the middleware is out-of-the-box Laravel, except one (which doesn't change the HTML). I disabled the additional middleware and, as expected, no change. Disabling the Laravel middleware generally breaks the app.
Level 27
@nicks Do you have some plugin installed in your IDE that replaces new line characters with <br>? Or it's related to your formatter somehow. Have you tried using a different IDE or resetting your IDE? Did you check if it's related to Laravel+Jetstream only?
Level 122
but then he would send those codes in the source when opening the view
Level 27
True, haven't thought of that...
Level 3
So I've now started with a fresh installation again and a very gradual implementation of my project, all the time supported by commits to git. There remains no obvious cause of the problem. It seems to happen if I edit resources\views\layouts\app.blade.php (from Jetstream), but once it happens, reverting to a previous commit doesn't make it go away - only a fresh install will. Clearing server and browser caches doesn't do the trick either.
I thought it might be something to do with line endings being changed by VSCode perhaps, but everything is coded the same way (in my installation with Windows CRLF line endings) both before and after edit.
Further investigation of the issue is that the insertion of line breaks only happens during the expansion of the slots at {{ $header }} and {{ $slot }} in resources\views\layouts\app.blade.php. This file is straight out-of-the-box from Jetstream, and reads
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
@livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
@livewire('navigation-menu')
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
@stack('modals')
@livewireScripts
</body>
</html>
The supporting component class in app\View\Components\AppLayout.php is once again out-of-the-box and reads:
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class AppLayout extends Component
{
/**
* Get the view / contents that represents the component.
*
* @return \Illuminate\View\View
*/
public function render()
{
return view('layouts.app');
}
}
And a typical call, say from the file resources\views\dashboard.blade.php looks like this. It is this code which is having the <br /> tags inserted.
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<x-jet-welcome />
</div>
</div>
</div>
</x-app-layout>
I'm still open to ideas on this, as I really want to know what is going on, but, given the delays I've incurred against a tight deadline, and the fact that the majority of Jetstream blades were going to need to be recoded for the project anyway, my decision is to press on regardless, reworking code to avoid the use of component slots.
Level 3
As I previously commented, this seemed to be related to the expansion of slots in components. I have now resolved this by using {{{ $slot }}} instead of {{ $slot }}.
For example, in the Jetstream component template resources/views/vendor/jetstream/components/form-section.blade.php, if I have
@props(['submit'])
<div {{ $attributes->merge(['class' => 'row']) }}>
<x-jet-section-title>
<x-slot name="title">{{ $title }}</x-slot>
<x-slot name="description">{{ $description }}</x-slot>
</x-jet-section-title>
<div class="col-md-8">
<div class="card card-body">
<div class="container">
<form wire:submit.prevent="{{ $submit }}">
{{ $form }}
@if (isset($actions))
{{ $actions }}
@endif
</form>
</div>
</div>
</div>
</div>
which is called from resources/views/profile/update-profile-information-form.blade.php
<x-jet-form-section submit="updateProfileInformation">
<x-slot name="title">
{{ __('Profile Information') }}
</x-slot>
<x-slot name="description">
{{ __('Update your profile information and email address.') }}
</x-slot>
<x-slot name="form">
<!-- Name -->
<div class="form-group row">
<x-jet-label for="name" value="{{ __('Name') }}" />
<x-jet-input id="name" type="text" wire:model.defer="state.name" autocomplete="name" />
<x-jet-input-error for="name" />
</div>
<!-- Email -->
<div class="form-group row">
<x-jet-label for="email" value="{{ __('Email') }}" />
<x-jet-input id="email" type="email" wire:model.defer="state.email" />
<x-jet-input-error for="email" />
</div>
</x-slot>
<x-slot name="actions">
<x-jet-action-message on="saved" class="alert alert-success">
{{ __('Saved.') }}
</x-jet-action-message>
<div class="form-group row">
<div class="offset-md-4 col-md-6">
<x-jet-button wire:loading.attr="disabled" wire:target="photo">
{{ __('Save') }}
</x-jet-button>
</div>
</div>
</x-slot>
</x-jet-form-section>
This gives me line breaks in the form, rendering it as
However, if I change {{ $form }} to {{{ $form }}} and {{ $actions }} to {{{ $actions }}} in form-section.blade.php , I get the correct rendering, namely:
Please or to participate in this conversation.