Concenate in import not working

[mledwards]

Hello,

Hope someone can help me with this.

This import works: {% import "@components/hero/component.macro.twig" as componentMacro %}

But this doesn't {% import "@components/" ~ "hero" ~ "component.macro.twig" as componentMacro %}

The error comes back as Can't resolve '~'

Does anyone know a way around this? As I need to build up dynamic imports inside a for loop.

[willrowe]

Does it work if you concatenate and set to a variable, then import the variable?

{% set import_path = "@components/" ~ "hero" ~ "component.macro.twig" %}
{% import import_path as componentMacro %}

[mledwards]

Hi Will. I did try that, I forgot to mention. It essentially said can't resolve import_path

[eric-schmidt]

I'm running into this same issue as well, but for Includes and Embeds as well. Even when setting a variable first, it seems as though Twig.js is not properly respecting the concatenation. I've also tried string interpolation and using |join, all with no luck 🤔

[mledwards]

Maybe this hasn't been implemented? Feels like quite a biggie. I guess for now I'll make a big ifelse statement with all the possible options. Just means 1 manual task every time we add a new importable file.

[eric-schmidt]

@mledwards Yep, I would agree that this feels like a rather large gap. My solution as well was a 30 line if statement to capture all of my possible options 😬 It's at least something, but definitely not ideal.

[willrowe]

I just tested this out and basic concatenation is working fine in the import paths, so there must be something else going on here.

Please provide a https://twigfiddle.com/ example that works there, but not in twig.js so I can investigate further.

[mledwards]

Hi @willrowe. Thanks for the help!

Running this line shows the file is at least being looked for: https://twigfiddle.com/dd2c52

Locally this says Cannot resolve "/some/file/" in ...

[eric-schmidt]

Unfortunately, I'm running this as a part of https://github.com/emulsify-ds/emulsify-drupal, which integrates Storybook with Drupal, so it will be tough to create a demonstration of this. There are definitely a lot of cooks in the kitchen with my implementation, so it could definitely be only tangentially related to Twig.js.

Basically, I'm having issue with concatenation not being respected in an import with a variable in the path name, e.g. {% set link_icon_path = '@atoms/04-images/svg/' ~ link_icon ~ '.twig' %}, where link_icon is being dynamically passed from another component. This works fine in the PHP-based version of Twig that Drupal uses, but not in the JS-based version of Twig that is hooked up with Storybook.

[willrowe]

As I mentioned above, I tested basic concatenation and it is working. What I really need is the most simple version of this that works on TwigFiddle, but not on twig.js to rule out path, loader, or issues emanating from other packages.

If it is an issue with the variable being passed in, please construct a simple version of the template inheritance/include structure.

[mledwards]

@eric-schmidt This is interesting, we're loading TwigJS into Storybook too! The plot thickens. I'll have a dig around in Storybook, see what version of TwigJS we're loading, and get back to you @willrowe

It also works fine in our Twing implementation too.

[willrowe]

@mledwards ok, I will await your findings.

[mledwards]

It's twigjs-loader, not twigjs :( Thanks for the help @willrowe https://github.com/megahertz/twigjs-loader/issues/4

[willrowe]

@mledwards thanks for looking into that. @eric-schmidt can you confirm that the referenced issue is what was causing you problem as well?

[eric-schmidt]

@willrowe Yup, that appears to be the culprit. Thanks for finding that, @mledwards 👍