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

CommentFileSizeAuthor
#2 3460633-02-unable-to-find-the-twig-template-for-the-component.patch4.96 KBkevinfunk

Comments

kevinfunk created an issue. See original summary.

kevinfunk’s picture

kevinfunk
he/him
commented
Status: Active » Needs work
StatusFileSize
new 3460633-02-unable-to-find-the-twig-template-for-the-component.patch4.96 KB

A patch for the temporary solution.

idesigntocode’s picture

idesigntocode commented

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

foodslover’s picture

foodslover commented

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. 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:

/docroot/modules/custom/custom_module_abc/modules/module_abc/components/<component_name>/<component_name>.component.yml

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

   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:

   /docroot/modules/custom/custom_module_abc/modules/module_abc/components/<component_name>/<component_name>.twig

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

   {#
   /**
    * @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.