Issue with accessing logic in component view

[WrR0n]

I am using Radicle. I have created a component and now I wanted to put the logic in the app files for the first time so that I can use {{ $image }} in the view and have the image displayed.

It was working fine locally, but when I deployed it to the server, I encountered an error like this:
Undefined variable $image (View: /radicle/site.nl/resources/views/components/problems-card.blade.php)

This namespace and the use of file of logic:

namespace App\View\Components;

use Illuminate\View\Component;

My question is, why is the view not able to find the logic?

[ben]

Can you give me all the steps to reproduce this issue?

How are you deploying Radicle?

[WrR0n]

These steps I have done to deploy the Radicle application:

1. I created a zip file containing the following directories and files: app, bedrock, config, public, resources, routes, storage, composer.json, and wp-cli.yml.

2. Upload the zip file to the server using FTP and extract its contents.

3. Changed the .env file with the configurations for the server.

4. Run the command “composer install --no-dev” to install the necessary dependencies.

5. On the server, I created a folder “radicle” in the home directory. And place the domain-specific folder inside the “radicle” directory.

6. Linked the “public” directory of the Radicle application to the “public_html” directory in “/domains/{DomainName}” to make the application live.

7. I cleared the cache folder on the server after verifying that the component still didn’t work.

I have importing the local database, After importing I run the search-replace command.
This is deploy on Shared Server with DirectAdmin.

I have attempted the following commands: clear-compiled, view:clear/cache, and acorn:init

[WrR0n]

These are the steps I have taken to deploy.
A year ago, I encountered a similar problem, but at that time I couldn’t figure out why it wasn’t working on the server. I had to put all the logic in the view.
I hope to avoid that with this project.

What’s strange is that we are using Composers, AcfComposer, and Providers, and they are working well, but not Components.

Only with Providers, I had to manually add the created providers to composer.json.

@WrR0n

These steps I have done to deploy the Radicle application:

1. I created a zip file containing the following directories and files: app, bedrock, config, public, resources, routes, storage, composer.json, and wp-cli.yml.
2. Upload the zip file to the server using FTP and extract its contents.
3. Changed the .env file with the configurations for the server.
4. Run the command “composer install --no-dev” to install the necessary dependencies.
5. On the server, I created a folder “radicle” in the home directory. And place the domain-specific folder inside the “radicle” directory.
6. Linked the “public” directory of the Radicle application to the “public_html” directory in “/domains/{DomainName}” to make the application live.
7. I cleared the cache folder on the server after verifying that the component still didn’t work.

I have importing the local database, After importing I run the search-replace command.
This is deploy on Shared Server with DirectAdmin.

I have attempted the following commands: clear-compiled, view:clear/cache, and acorn:init

[ben]

Are you running wp acorn optimize during the deployment?

Ref Deploying Radicle | Radicle Docs | Roots

[WrR0n]

I actually rarely run the command “wp acorn optimize,” to be honest. But it seems that I need to run it on the server because it includes all the paths from my local environment.

Here’s what happened: I executed the command locally and then transferred the files. However, the “config.php” file ended up in the “storage/framework/cache” folder with paths specific to my local environment, causing it not to work on the server. When I run the command on the server, the “config.php” works fine. However, the Components are still not functioning.

[ben]

Are any of the components that are included out of the box working? If you’re on the latest version you should be able to hit the /welcome/ URL to see them

[WrR0n]

I am currently not using the latest version of Radicle 1.2.0. I wanted to quickly set up an environment with the latest Radicle version, but I realized that there are dependencies that require PHP 8.1.0, while the server is running PHP 8. I cannot easily switch the server’s PHP version as there are other sites hosted on it.

I can look into it on Monday to see if the default components work with the new version.

However, what I noticed is that the example components do not have files in the “app/view/Components/{ComponentName}.php” directory. The logic for these example components is included in the view itself.

The issue I’m facing is that I have the logic in the “app/view/Components/{ComponentName}.php” file, which only works locally on my PC and not on the server.

So, this example is one of the components I created, and it only works locally.

This is view path “/resources/views/components/resolve-points-card.blade.php”

<div
  class="item ll:w-[405px] flex h-max w-full flex-col gap-4 sm:w-[286px] xl:w-[352px] 2xl:w-[426.5px] min-[1750px]:w-[498px] min-[1920px]:w-[525px]">

  @if ($title || $icon['iconName'] !== 'none')
    <div class="h-max space-y-4">
      @if ($icon['iconName'] !== 'none')
        <div
          class="{{ $color ?? 'bg-[#3D348B]/10 text-[#3D348B]' }} flex h-10 w-10 items-center justify-center rounded-md p-4">
          <x-icon :data=$icon class="text-base" />
        </div>
      @endif

      @if ($title)
        <h3 class="text-primary-dark w-full text-xl font-bold leading-6 tracking-[0.48px]">
          {{ $title }}
        </h3>
      @endif
    </div>
  @endif

  @if ($text)
    <p class="text-dark self-start text-xs leading-6 tracking-[0.32px] xl:w-9/12">
      {{ $text }}
    </p>
  @endif

</div>

And I have logic here “/app/View/Components/resolvePointsCard.php”

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class resolvePointsCard extends Component
{
    protected $data;
    protected $processData;

    public $title;
    public $icon;
    public $color;
    public $text;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($data)
    {
        $this->data = $data;
        $this->title = $this->processData($data)['title'];
        $this->icon = $this->processData($data)['icon'];
        $this->color = $this->processData($data)['color'];
        $this->text = $this->processData($data)['text'];
    }

    private function processData($data)
    {
        $processData = $data;

        switch ($data['color']) {
            case '#3D348B':
                $processData['color'] = 'bg-[#3D348B]/10 text-[#3D348B]';
                break;
            case '#F5B300':
                $processData['color'] = 'bg-[#F5B300]/10 text-[#F5B300]';
                break;
            case '#F35B04':
                $processData['color'] = 'bg-[#F35B04]/10 text-[#F35B04]';
                break;
            case '#7678ED':
                $processData['color'] = 'bg-[#7678ED]/10 text-[#7678ED]';
                break;
            case '#00BDB0':
                $processData['color'] = 'bg-[#00BDB0]/10 text-[#00BDB0]';
                break;
            case '#E71D36':
                $processData['color'] = 'bg-[#E71D36]/10 text-[#E71D36]';
                break;
            case '#4361EE':
                $processData['color'] = 'bg-[#4361EE]/10 text-[#4361EE]';
                break;

            default:
                break;
        }

        return $processData;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.resolve-points-card');
    }
}

I invoke this component within a block and pass an array to it, which is then processed by the component’s logic. In some cases, such as this one, certain values like the color code are converted into Tailwind CSS classes.

Here is how I call the component in my block:

@foreach ($items as $item)
  <x-resolve-points-card :data=$item />
@endforeach

I expect that when I test the example components on the server, they should work fine since they do not rely on the “app/view/Components/{ComponentName}.php” file.

[ben]

There is an alert component in the components directory within app:

https://github.com/roots/radicle/blob/main/app/View/Components/Alert.php

Can you confirm whether or not the alert is working out of the box? It’s used on the 404 template

If you compare that file to the one that you provided, I immediately see that you’re using Illuminate\View\Component instead of use Acorn\View\Component

Tip: If you use the wp acorn CLI commands to make a new component then it will create a placeholder that works

[WrR0n]

The past few weeks have been very busy, which is why I couldn’t respond earlier. I’m currently working on a new project where I’m using the latest version of Radicle.

I have tested it, but the welcome page is working with the components.
I have also tested it with the Alert Component, and it works fine.

I used the wp acorn CLI to generate the components with placeholders, but they only work locally and not on the server.
The command make placeholders with “use Illuminate\View\Component” and not “use Roots\Acorn\View\Component” but now I have switch it in my components.

It seems that there might be something in the code causing the issue.
Are there any specific steps I need to follow to create and deploy a component?
Usually, I create the component using wp acorn make:component NAME.

This is a very simple component. I like to pass an array of data to the component and have the component handle the rendering.

The problem is that when I deploy it to the server, I get an error saying ‘Undefined variable $mediaType’, and I’m not sure why this is happening.

This example for Component (brancheCard.php):

<?php

namespace App\View\Components;

use Roots\Acorn\View\Component;

class brancheCard extends Component
{
    protected $data;
    protected $processData;

    public $size;
    public $mediaType;
    public $media;
    public $titleComp;
    public $url;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($data)
    {

        $processData = $this->processData($data);

        $this->data = $data;
        $this->size = $processData['size'];
        $this->mediaType = $processData['mediaType'];
        $this->media = $processData['media'];
        $this->titleComp = $processData['titleComp'];
        $this->url = $processData['url'];
    }

    private function processData($data)
    {
        $processData = $data;

        return [
            'size' => $data['size'],
            'mediaType' => $data['mediaType'],
            'media' => $data['media'],
            'titleComp' => $data['title'],
            'url' => $data['url'],
        ];
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return $this->view('components.branche-card');
    }
}

Please let me know if you need any further information or examples.

[ben]

The PSR-4 standard requires your files and directories to be case sensitive and the corresponding classes and namespaces to be in PascalCase.

[WrR0n]

Yes, that’s it.
I wasn’t really familiar with the standards. I saw them mentioned sometimes but didn’t know what they meant or how to apply them. I think I need to delve into the PSR-4 standard. Thank you for your help.