Problem with Laravel/Vite #738

DasPocky · 2023-05-31T03:50:56Z

DasPocky
May 31, 2023

Hi,

I am currently trying to get a PDF of a blade view created. I am working with TailwindCSS there. The problem is, when I work with "npm run dev" there are no problems generating the PDF. However, as soon as I create the CSS files with "npm run build", there are problems. The page loads dead.

"resources/views/pdf/document.blade.php":

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    @vite('resources/css/app.css')
</head>
<body>
<div class="h-full p-4">
<!-- Content here -->
</div>
</body>
</html>

"app/Http/Controllers/PrintController.php":

<?php

namespace App\Http\Controllers;

use App\Models\Company;
use App\Models\Product;
use Filament\Notifications\Actions\Action;
use Filament\Notifications\Notification;
use Spatie\Browsershot\Browsershot;

class PrintController extends Controller
{
    public function print($record)
    {
        $path = public_path('storage/documents');

        if (! file_exists($path)) {
            mkdir($path, 0777, true);
        }

        $data = [
            // ## Data
        ];

        $html = view('pdf.document', ['data' => $data])->render();
        $pdfPath = $path.'/'.$record->order_number.'.pdf';

        Browsershot::html($html)
            ->setNodeBinary(env('NODE_BINARY', '/usr/bin/node'))
            ->setNpmBinary(env('NPM_BINARY', '/usr/bin/npm'))
            ->noSandbox()
            ->showBackground()
            ->format('a4')
            ->savePdf($pdfPath);
            
            // ## Send Notification

    }
}

Once I had an error message in the logs. There it was described that the "old" headless mode is/can not be used anymore. But I could not reproduce the error yet. Does anyone have a tip what I can do?

EDIT:

I managed to reproduce the error. This is an excerpt from the Laravel log file.:

[2023-05-31 17:52:51] local.ERROR: The command "PATH=$PATH:/usr/local/bin:/opt/homebrew/bin NODE_PATH=`/usr/local/bin//node /usr/local/bin//npm root -g` /usr/local/bin//node '##*-App-Working-Folder*-##/vendor/spatie/browsershot/src/../bin/browser.js' '{"url":"file:\/\/\/var\/folders\/cf\/kl0tf0d922v9yns5hmffhsjr0000gn\/T\/630679135-0590778001685548340\/index.html","action":"pdf","options":{"path":"##*-App-Working-Folder*-##/public\/storage\/documents\/360000.pdf","args":["--no-sandbox"],"viewport":{"width":800,"height":600},"displayHeaderFooter":false,"format":"a4","printBackground":true}}'" failed.

Exit Code: 1(General error)

Working directory: ##*-App-Working-Folder*-##/public

Output:
================


Error Output:
================
�[1m�[43m�[30m
  Puppeteer old Headless deprecation warning:�[0m�[33m
    In the near feature `headless: true` will default to the new Headless mode
    for Chrome instead of the old Headless implementation. For more
    information, please see https://developer.chrome.com/articles/new-headless/.
    Consider opting in early by passing `headless: "new"` to `puppeteer.launch()`
    If you encounter any bugs, please report them to https://github.com/puppeteer/puppeteer/issues/new/choose.�[0m

TimeoutError: Navigation timeout of 30000 ms exceeded
    at LifecycleWatcher._LifecycleWatcher_createTimeoutPromise (/usr/local/lib/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/LifecycleWatcher.js:162:12)
 {"userId":2,"exception":"[object] (Symfony\\Component\\Process\\Exception\\ProcessFailedException(code: 0): The command \"PATH=$PATH:/usr/local/bin:/opt/homebrew/bin NODE_PATH=`/usr/local/bin//node /usr/local/bin//npm root -g` /usr/local/bin//node '##*-App-Working-Folder*-##/vendor/spatie/browsershot/src/../bin/browser.js' '{\"url\":\"file:\\/\\/\\/var\\/folders\\/cf\\/kl0tf0d922v9yns5hmffhsjr0000gn\\/T\\/630679135-0590778001685548340\\/index.html\",\"action\":\"pdf\",\"options\":{\"path\":\"\\/Users\\/bjoern\\/Workspace\\/Laravel\\/WeigandDriver\\/public\\/storage\\/documents\\/360000.pdf\",\"args\":[\"--no-sandbox\"],\"viewport\":{\"width\":800,\"height\":600},\"displayHeaderFooter\":false,\"format\":\"a4\",\"printBackground\":true}}'\" failed.

Exit Code: 1(General error)

Working directory: ##*-App-Working-Folder*-##/public

Output:
================


Error Output:
================
\u001b[1m\u001b[43m\u001b[30m
  Puppeteer old Headless deprecation warning:\u001b[0m\u001b[33m
    In the near feature `headless: true` will default to the new Headless mode
    for Chrome instead of the old Headless implementation. For more
    information, please see https://developer.chrome.com/articles/new-headless/.
    Consider opting in early by passing `headless: \"new\"` to `puppeteer.launch()`
    If you encounter any bugs, please report them to https://github.com/puppeteer/puppeteer/issues/new/choose.\u001b[0m

TimeoutError: Navigation timeout of 30000 ms exceeded
    at LifecycleWatcher._LifecycleWatcher_createTimeoutPromise (/usr/local/lib/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/LifecycleWatcher.js:162:12)
 at ##*-App-Working-Folder*-##/vendor/spatie/browsershot/src/Browsershot.php:914)
[stacktrace]

That's the message I get from Laravel. As already written, this only happens when I used "npm run build" to create the CSS files.

The command "PATH=$PATH:/usr/local/bin:/opt/homebrew/bin NODE_PATH=`/usr/local/bin//node /usr/local/bin//npm root -g` /usr/local/bin//node '##*-App-Working-Folder*-##/vendor/spatie/browsershot/src/../bin/browser.js' '{"url":"file:\/\/\/var\/folders\/cf\/kl0tf0d922v9yns5hmffhsjr0000gn\/T\/1355252119-0802270001685548371\/index.html","action":"pdf","options":{"path":"##*-App-Working-Folder*-##/public\/storage\/documents\/360000.pdf","args":["--no-sandbox"],"viewport":{"width":800,"height":600},"displayHeaderFooter":false,"format":"a4","printBackground":true}}'" failed. Exit Code: 1(General error) Working directory: ##*-App-Working-Folder*-##/public Output: ================ Error Output: ================ �[1m�[43m�[30m Puppeteer old Headless deprecation warning:�[0m�[33m In the near feature `headless: true` will default to the new Headless mode for Chrome instead of the old Headless implementation. For more information, please see https://developer.chrome.com/articles/new-headless/. Consider opting in early by passing `headless: "new"` to `puppeteer.launch()` If you encounter any bugs, please report them to https://github.com/puppeteer/puppeteer/issues/new/choose.�[0m TimeoutError: Navigation timeout of 30000 ms exceeded at LifecycleWatcher._LifecycleWatcher_createTimeoutPromise (/usr/local/lib/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/LifecycleWatcher.js:162:12)

I understand the error from the log that there was a strong change in the new version of Puppeteer. How can I solve the problem? First consideration would be to use an older version, but whether that makes sense?

EDIT 2:

My current workaround is to take the CSS file directly from the CDN and do my TailwindCSS settings directly in the file. But can not be the final solution.

<head>
    <meta charset="utf-8">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                fontSize: {
                    xxs: '0.5rem',
                    xs: '0.65rem',
                    sm: '0.8rem',
                    base: '1rem',
                    xl: '1.25rem',
                    '2xl': '1.563rem',
                    '3xl': '1.953rem',
                    '4xl': '2.441rem',
                    '5xl': '3.052rem',
                },
            }
        }
    </script>
</head>

Thanks a lot!

Greetings,
Björn

trippo · 2023-07-03T10:45:36Z

trippo
Jul 3, 2023

You can try to add ->setOption('newHeadless', true) before savePdf

0 replies

onally01 · 2023-07-06T22:05:58Z

onally01
Jul 6, 2023

Has anyone been able to fix this?

0 replies

razan-rai · 2024-04-10T12:14:11Z

razan-rai
Apr 10, 2024

Sometime if you have image then you need to convert the image to base64.

Converting to base64

public function generateBase64EncodedImage($filename){
        $filePath = public_path($filename);
        if (file_exists($filePath)) {
            return base64_encode(file_get_contents($filePath));
        }
        return null;
    }

Generation of base64
$school->logo = $this->generateBase64EncodedImage($school->logo);

Using base64 in blade
<img class="gradesheet_logo" src="data:image/jpeg;base64,{{ $school->logo }}" alt="School Logo">

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Problem with Laravel/Vite #738

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Problem with Laravel/Vite #738

Uh oh!

Uh oh!

DasPocky May 31, 2023

Replies: 3 comments

Uh oh!

trippo Jul 3, 2023

Uh oh!

onally01 Jul 6, 2023

Uh oh!

razan-rai Apr 10, 2024

DasPocky
May 31, 2023

trippo
Jul 3, 2023

onally01
Jul 6, 2023

razan-rai
Apr 10, 2024