Twig 'include' in variable throws "Unable to find template file"

[wfpfork]

Unable to find template file

I came across this error while experimenting with your awesome craft/storybook setup. I already found a workaround: I use Twig macro.

Craft uses /templates as base dir for twig-template-files so I use . as base path for my twig-files in /templates/**/*.twig. But I guess webpack does not think like that so we got a problem here...

If you have any further questions, just comment below, thanks in advance!

After git clone I added the following files:

• stories/a.stories.js
• stories/b.stories.js
• templates/components/a.twig
• templates/components/b.twig

Works with Storybook but not with Craft

stories/a.stories.js

// Import: Twig
import component from 'components/a.twig';

// Component name
export default { title: 'Test/A' };

export const Simple = () => {
  return component();
};

stories/b.stories.js

// Import: Twig
import component from 'components/b.twig';

// Component name
export default { title: 'Test/B' };

export const Simple = () => {
  return component();
};

templates/components/a.twig

A

{% set content %}
{% include "templates/components/b.twig" %}
{% endset %}

{{ content }}

templates/components/b.twig

B

Output in Storybook:

A B

Works with Craft but not with Storybook

templates/components/a.twig

A

{% set content %}
{% include "./b.twig" %}
{% endset %}

{{ content }}

Output in Storybook:

Unable to find template file ./b.twig

Workaround with macro

templates/components/a.twig

A

{% import "./b.twig" as b %}

{% set content %}
{{ b.render() }}
{% endset %}

{{ content }}

templates/components/b.twig

{% macro render() %}
  B
{% endmacro %}

Output in Storybook:

A B

[ben-rogerson]

thanks for sharing what you found - these little inconsistencies with Craft are really annoying!