Magento 2 Debugging – JS UI Component in Browser

The direct answer to your question is to the set page layout in the layout XML for your page. On the layout XML file that includes the <uiComponent/>, set the layout attribute on the root <page/> node like:

<page layout="admin-2columns-left" />

This will just introduce another problem, though, with a Javascript error regarding a "source". This is fixed by adding a deps to the form's data source:

<settings>
    <layout>
        <navContainerName>left</navContainerName>
        <type>tabs</type>
    </layout>
    <deps>
        <dep>referral_form.referral_form_data_source</dep>
    </deps>
</settings>

Finally, the second block of code you provided is Magento 2.2 UI Component syntax. It provides a much shorter way to type the same thing. Compare, the succinct <type> with the longer <item name="type" xsi:type="string"> in the first snippet.

For a more complete picture of what the UI Component must look like with tabs, refer to this answer: https://magento.stackexchange.com/a/246035/1929.

Create app/code/Anshu/Custom/Setup/InstallData.php setup file in your module as follows:

<?php

declare(strict_types=1);

namespace Anshu\Custom\Setup;

use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Catalog\Api\Data\ProductAttributeInterface;
use Magento\Eav\Model\Config as EavConfig;

class InstallData implements InstallDataInterface
{
    /**
     * @var EavSetupFactory
     */
    private $eavSetupFactory;

    /**
     * @var EavConfig
     */
    private $eavConfig;

    public function __construct(EavSetupFactory $eavSetupFactory, EavConfig $eavConfig)
    {
        $this->eavSetupFactory = $eavSetupFactory;
        $this->eavConfig = $eavConfig;
    }
    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

        // adding eav attribute to product
        $attributeCode = 'custom_attribute';

        $entityType = ProductAttributeInterface::ENTITY_TYPE_CODE;
        $setId = $eavSetup->getDefaultAttributeSetId($entityType); 
        $groupId = $eavSetup->getDefaultAttributeGroupId($entityType, $setId);

        // to get the group name
        $groupName = $eavSetup->getGroupName($entityType, $setId, $groupId, 'attribute_group_name'); 

        $eavSetup->addAttribute($entityType, $attributeCode, [
            'label' => 'My Custom Attribute',
            'input' => 'textarea',
            'is_wysiwyg_enabled' => 1,
            'required' => 0,
            'user_defined' => 1,
            'visible_on_front' => 1,
            'group' => $groupName,
            'sort_order' => 30,
        ]);
    }
}

It seems that the following line is causing the issue in your code:

$catalogSetup = $this->categorySetupFactory->create(['setup' => $setup]);

And make sure if the attribute that you have created is there in the database.
And as far as I remember, there is no need to add any code in the ui-form component, if you have added the product attribute correctly, then it will appear automatically in the admin form.