Question 200205 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel Vite gives error qt.qpa.xcb: could not connect to display

I installed fresh Laravel 10 with Vite. When I execute from Docker container laravel.test command:

npm run build

then it works perfectly. However I made setup for this Laravel project in Vagrant where this command shows error:

$ npm run build

> build
> vite build

qt.qpa.xcb: could not connect to display :0.0
qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in "" even though it was found.
This application failed to start because no Qt platform plugin could be initialized. Reinstalling the application may fix this problem.

Available platform plugins are: eglfs, linuxfb, minimal, minimalegl, offscreen, vnc, xcb.

Aborted (core dumped)

Could you help me to answer my two questions?

  • What is this display and why vite needs this?
  • What makes the difference between Docker environment laravel.test and my Vagrant’s Ubuntu 22.04?

I installed all packages in Vagrant from Dockerfile for laravel.test container coming from command ./vendor/bin/sail artisan sail:publish.

Thanks in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found solution for errors coming from npm. Problem is in Vagrantfile:

    config.vm.synced_folder "..", "/home/vagrant/www/breeze", mount_options: ["dmode=775", "fmode=664"]

    If I delete mount_options like this:

    config.vm.synced_folder "..", "/home/vagrant/www/breeze"

    then it works perfectly fine.

    Reference Vagrantfile can be found in demo project https://github.com/absoftware/laravel-breeze-blade created for this problem, where Laravel can be used with sail up or vagrant up alternatively.

    Commands npm run build and npm run dev are working perfectly fine after removing mount_options. In my case mount_options are a historical solution for something else. I just copy-pasted this from older projects.

    This is also root cause for

    $ npm install
npm ERR! code 1
npm ERR! path /home/vagrant/www/breeze/node_modules/esbuild
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! node:internal/errors:867
npm ERR!   const err = new Error(message);
npm ERR!               ^
npm ERR!
npm ERR! Error: Command failed: /usr/bin/node /home/vagrant/www/breeze/node_modules/esbuild/bin/esbuild --version
npm ERR! node:child_process:924
npm ERR!     throw err;
npm ERR!     ^
npm ERR!
npm ERR! <ref *1> Error: spawnSync /home/vagrant/www/breeze/node_modules/@esbuild/linux-x64/bin/esbuild EACCES

    where EACCES suggested me it's about missing access to files.


  2. 0

    Install required dependencies or first of all check that these are installed or not:

    sudo apt update
sudo apt install libxcb-xinerama0
sudo apt install libxcb-xkb1
sudo apt install libxcb-render-util0
sudo apt install xvfb

    What is this display and why does Vite need it?

    The display in this context refers to the graphical display server, which is responsible for rendering the graphical user interface (GUI) elements. When running in a graphical environment, applications like Vite may require access to the display server in order to function properly. This is because certain UI-related operations, such as rendering graphics or interacting with the windowing system, rely on the display server.
    Vite, a front-end build tool, relies on Qt (a popular framework for building cross-platform applications) as one of its dependencies. Qt, in turn, requires access to a display to render graphical elements. When running in a headless environment like Vagrant, which doesn’t have a display by default, this can lead to issues.
    When you run npm run build with Vite in your Vagrant environment, Vite tries to use the "xcb" plugin, which is responsible for handling GUI interactions using the X Window System. However, in a headless environment like Vagrant, there might not be a proper X display server available, leading to the error you encountered.

    Make sure the Vagrant environment has access to a running graphical display server. You may need to configure X11 forwarding in your Vagrant setup to allow the VM to communicate with the host machine’s display server.

    What makes the difference between the Docker environment (laravel.test) and your Vagrant’s Ubuntu 22.04?

    The difference between the Docker environment and your Vagrant environment could be due to several factors:

    a. Docker: When running your Laravel project within a Docker container, the container environment is isolated and typically does not have direct access to the host machine’s graphical display server. This means that any graphical dependencies or operations within the container, such as those required by Vite, are not expected to work by default. The build process might be configured to work without relying on a graphical display.

    b. Vagrant: In contrast, Vagrant provisions a virtual machine (VM) that closely resembles a separate operating system. This VM is typically set up to mimic the host machine’s environment as closely as possible, including the availability of a graphical display server. However, if the Vagrant environment lacks the necessary graphical dependencies or if the display server is not properly configured, you may encounter the error you mentioned.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search