Unable to find the Twig template for the component, support Drupal 10.3

Created on 10 July 2024, 5 months ago

Problem/Motivation

In Drupal 10.3, Single-Directory Components are part of Drupal Core. Single-Directory Components and this module use the same machine name so our components are being discovered by Drupal Core. With this change, components now require a Twig template and if the component is in a module, it also requires a schema in the YAML file.

Error on Drupal 10.3
Drupal\Core\Render\Component\Exception\InvalidComponentException: Unable to find the Twig template for the component "component_example:example_react_calc". in Drupal\Core\Plugin\Component->__construct() (line 58 of core/lib/Drupal/Core/Plugin/Component.php).

Steps to reproduce

  • Install Drupal 10.3
  • Install the Component example module
  • Rebuild cache

Proposed resolution

A temporary solution would be to create a Twig template and schema for each example component.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇺🇸United States kevinfunk

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @kevinfunk
  • Status changed to Needs work 5 months ago
  • 🇺🇸United States kevinfunk

    A patch for the temporary solution.

  • The patch supplied is for the example components. Doesn't really help for the custom ones built.

  • 🇺🇸United States foodslover

    Here’s the solution I used—I hope it helps!

    1. **Update the Component Version**:
    First, I updated the component to version `1.0.0-rc5`. Then, to resolve the issue in my custom module, `module_abc`, I applied the approach from [this patch]( https://www.drupal.org/files/issues/2024-07-10/3460633-02-unable-to-find... ). Following the file structure in this patch, I mirrored the setup used for `component_example`.

    2. **Add the `components.yml` Configuration File**:
    I created a `components.yml` configuration file for the custom component within `module_abc`. According to the example in the patch, the path should look like this:

    ```plaintext
    /docroot/modules/custom/custom_module_abc/modules/module_abc/components//.component.yml
    ```

    Inside this file, I used content similar to the patch:

    ```yaml
    name: module abc
    description: '......'
    props:
    type: object
    properties: {}
    ```

    3. **Create the Required `.twig` Template File**:
    In Drupal 10.3 and above, each component also requires a corresponding `.twig` template file. I added this `.twig` file in the same directory as the `.component.yml` file and named it according to the component:

    ```plaintext
    /docroot/modules/custom/custom_module_abc/modules/module_abc/components//.twig
    ```

    Inside the `.twig` file, I included the following basic structure:

    ```twig
    {#
    /**
    * @file
    * Required Twig template for components as of Drupal 10.3.
    */
    #}
    ```

    After creating this empty `.twig` file, the error was resolved, and no further code changes were needed. The module is now functioning as expected.

Production build 0.71.5 2024