Error: Undefined index: render element

Question

I encountered an error:

Error message
Notice: Undefined index: render element in Drupal\Core\Theme\ThemeManager->render() (line 200 of core/lib/Drupal/Core/Theme/ThemeManager.php).
...

I found the source of the problem, in my THEME.theme file, I have this hook:

function THEME_preprocess_paragraph__header(&$variables) {
    $blockInstance = Block::load('searchblock');
    $variables['searchBlock'] = \Drupal::entityManager()
        ->getViewBuilder('block')
        ->view($blockInstance);
}

In my twig file, I have this code

{% block paragraph %}
    {{ searchBlock }}
{% endblock paragraph %}

Why is it showing Undefined index: render element?

I tried to put print_r($variables['searchBlock']), and this is the output:

Array
(
    [#cache] => Array
        (
            [keys] => Array
                (
                    [0] => entity_view
                    [1] => block
                    [2] => searchblock
                )

            [contexts] => Array
                (
                    [0] => languages:language_interface
                )

            [tags] => Array
                (
                    [0] => block_view
                    [1] => config:block.block.searchblock
                )

            [max-age] => -1
        )

    [#weight] => -6
    [#lazy_builder] => Array
        (
            [0] => Drupal\block\BlockViewBuilder::lazyBuilder
            [1] => Array
                (
                    [0] => searchblock
                    [1] => full
                    [2] => 
                )

        )

)

In the twig file, I tried to put dump(searchBlock), and this is the output:

array(3) {
  ["#cache"]=>
  array(4) {
    ["keys"]=>
    array(3) {
      [0]=>
      string(11) "entity_view"
      [1]=>
      string(5) "block"
      [2]=>
      string(11) "searchblock"
    }
    ["contexts"]=>
    array(1) {
      [0]=>
      string(28) "languages:language_interface"
    }
    ["tags"]=>
    array(2) {
      [0]=>
      string(10) "block_view"
      [1]=>
      string(30) "config:block.block.searchblock"
    }
    ["max-age"]=>
    int(-1)
  }
  ["#weight"]=>
  int(-6)
  ["#lazy_builder"]=>
  array(2) {
    [0]=>
    string(42) "Drupal\block\BlockViewBuilder::lazyBuilder"
    [1]=>
    array(3) {
      [0]=>
      string(11) "searchblock"
      [1]=>
      string(4) "full"
      [2]=>
      NULL
    }
  }
}

Seems that the problem occurs in my custom block SearchBlock plugin. Here's the content on the SearchBlock.php:

<?php

namespace Drupal\site_core\Plugin\Block;

use Drupal\Core\Access\AccessResult;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Session\AccountInterface;

/**
 * Provides a block with search information.
 *
 * @Block(
 *   id = "site_search_block",
 *   admin_label = @Translation("Custom Search Block"),
 * )
 */
class SearchBlock extends BlockBase {
  /**
   * {@inheritdoc}
   */
  public function build() {
    return [
      '#theme' => 'site_search_block',
      '#attached' => [
        'library' =>  [
          'site_core/autocomplete'
        ]
      ],
      '#cache' => [
        'max-age' => 0
      ]
    ];
  }

  /**
   * {@inheritdoc}
   */
  protected function blockAccess(AccountInterface $account) {
    return AccessResult::allowedIfHasPermission($account, 'access content');
  }
}

Here's my hook_theme function:

function site_core_theme() {
  return [
    'site_search_block' => [
      'template' => 'site-search-block',
    ]
  ];
}

Here's my site-search-block.html.twig:

<div class="search-bar">
    <select id="source" style="height: 0px; width: 0px; position: absolute; border: none; padding: 0px; margin: 0px;">
        <option value="type1">Type1</option>
        <option value="type2">Type2</option>
    </select>
    <div class="term">
        <div class="box-input">
            <input autocomplete="off" class="search-term ui-autocomplete-input"
                data-type1-autocomplete="true" id="searchTerm" name="searchTerm" onkeypress="return searchOnEnter(event)"
                placeholder="Search" />
        </div>

        <div class="box-remove"><button class="btn-remove" onclick="jQuery('#searchTerm').val('');">X</button></div>

        <ul class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" id="ui-id-1" style="display: none;"
            tabindex="0">
        </ul>
    </div>
    <input class="btn-submit" onclick="search()" type="button" value="Go" />
</div>

Can anyone help me with this?

Answer 1

If you don't set a variables key for a theme hook implementation, the system defaults to expecting a render element. It appears your theme hook doesn't require either of those, so you can fix it by setting an empty array for variables. You can change this:

function site_core_theme() {
  return [
    'site_search_block' => [
      'template' => 'site-search-block',
    ]
  ];
}

To this:

function site_core_theme() {
  return [
    'site_search_block' => [
      'template' => 'site-search-block',
      'variables' => [],
    ],
  ];
}