Twig function "source" and relative paths

[kostik-noir]

There is Twig function source which returns the content of a template without rendering it. One useful use of this function is to insert the svg file into the final HTML.
However, this only works if we specify the full path to the inserted file relative to Webpack context.

I.e. let's assume that we have such a file structure

src/
  |-- assets/
       |-- file.svg
  |-- index.twig
  |-- index.js

the content of index.twig looks like this:

<div>{{ source('....') }}</div>

• if we use <div>{{ source('./assets/file.svg') }}</div> then the result HTML contains "Template "./assets/file.svg" is not defined." instead of content of SVG file
• if we use <div>{{ source('assets/file.svg') }}</div> then the result HTML contains "Template "assets/file.svg" is not defined." instead of content of SVG file
• if we use <div>{{ source('src/assets/file.svg') }}</div> then the result HTML contains content of SVG file

Files to reproduce this behavior are attached.

Any ideas how to fix this?

twig-resolve.zip

[radiocity]

Why not to use include?

[kostik-noir]

if we replace

<div>{{ source('./assets/file.svg') }}</div>

by

<div>{% include('./assets/file.svg') %}</div>

then

ERROR in   Error: Child compilation failed:
  Module build failed (from ./node_modules/twig-html-loader/index.js):
  NonErrorEmittedError: (Emitted value instead of an instance of Error) TwigException: Unable to parse 'include('./asset  s/file.svg')'
  
  - NormalModule.js:313 
    [twig-resolve]/[webpack]/lib/NormalModule.js:313:13
  
  - LoaderRunner.js:367 
    [twig-resolve]/[loader-runner]/lib/LoaderRunner.js:367:11
  
  - LoaderRunner.js:233 
    [twig-resolve]/[loader-runner]/lib/LoaderRunner.js:233:18
  
  - LoaderRunner.js:111 Object.context.callback
    [twig-resolve]/[loader-runner]/lib/LoaderRunner.js:111:13
  
  
  - NonErrorEmittedError: (Emitted value instead of an instance of Error) TwigException: Unable to parse 'include('./ass    ets/file.svg')'
  
  - child-compiler.js:122 
    [twig-resolve]/[html-webpack-plugin]/lib/child-compiler.js:122:18
  
  - Compiler.js:343 
    [twig-resolve]/[webpack]/lib/Compiler.js:343:11
  
  - Compiler.js:681 
    [twig-resolve]/[webpack]/lib/Compiler.js:681:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [twig-resolve]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:678 
    [twig-resolve]/[webpack]/lib/Compiler.js:678:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [twig-resolve]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1423 
    [twig-resolve]/[webpack]/lib/Compilation.js:1423:35
  
  

ℹ ｢wdm｣: Failed to compile.

[radiocity]

@kostik-noir

<div class="quote__controllers" data-glide-el="controls">
  <a class="quote__control quote__left" data-glide-dir="<">
      {% include '@svg/lt.svg' %}
  </a>
  <a class="quote__control quote__right" data-glide-dir=">">
      {% include '@svg/lt.svg' %}
  </a>
</div>

[kostik-noir]

What's @svg in {% include '@svg/lt.svg' %}?

[radiocity]

Namespace

[kostik-noir]

Namespace is not a relative path.

PS I found a solution. I'll create PR later.

[kostik-noir]

#31