block is unable to render when being wrapped by an each loop

[quiquelhappy]

Context+What I checked

• The blocks are wraped on a layout and extended with context, therefore:
• The blocks compile correctly when outside the each loop
• Rendering blocks wrapped on an each loop always result in a failed output, with or without errors depending on how the block name is specified

Env

• handlebars: ^4.7.7,
• handlebars-layouts: ^3.1.4,
• node: v18.6.0

Compile with hard errors

In both of the following cases, the error is the same:

TypeError: Cannot create property '$$layoutStack' on string 'a'
    at getStack (redacted\node_modules\handlebars-layouts\index.js:11:25)
    at applyStack (redacted\node_modules\handlebars-layouts\index.js:16:14)
    at String.block (redacted\node_modules\handlebars-layouts\index.js:169:4)
    at String.wrapper (redacted\node_modules\handlebars\lib\handlebars\internal\wrapHelper.js:10:19)
    at eval (eval at createFunctionContext (redacted\node_modules\handlebars\lib\handlebars\compiler\javascript-compiler.js:265:23), <anonymous>:11:127)
    at prog (redacted\node_modules\handlebars\lib\handlebars\runtime.js:333:12)
    at execIteration (redacted\node_modules\handlebars\lib\handlebars\helpers\each.js:50:9)
    at Object.<anonymous> (redacted\node_modules\handlebars\lib\handlebars\helpers\each.js:63:13)
    at Object.wrapper (redacted\node_modules\handlebars\lib\handlebars\internal\wrapHelper.js:10:19)
    at Object.eval (eval at createFunctionContext (redacted\node_modules\handlebars\lib\handlebars\compiler\javascript-compiler.js:265:23), <anonymous>:19:49)

Variable block name

Trying to render a block with a variable name

{{#each modules as |module|}}
<div class="card px-4 py-4 mb-3">
    {{#block module}}{{/block}}
</div>
{{/each}}

with the data

{
  "modules":["a","b","c"]
}

Fixed block name

Trying to render a block with a constant name

{{#each modules as |module|}}
<div class="card px-4 py-4 mb-3">
    {{#block "a"}}{{/block}}
</div>
{{/each}}

Successful compile, no errors, but invalid/unwanted output

Nested variable block name error

In this case there are no errors being thrown, but the {{#block ...}} results in a blankspace in every iteration.

{
  "modules":[
    {
      "type":"a"
    } 
  ]
}

with the tamplate

{{#each modules as |module|}}
<div class="card px-4 py-4 mb-3">
    {{#block (lookup . 'type')}}{{/block}}
</div>
{{/each}}

[shannonmoeller]

Could you provide an example of a file where you {{#extend}} the layout that contains these blocks so I can see how you're using {{#content}} and get a better understanding of the output you're expecting, please? What you're trying to do is a pattern I've never seen before, so I want to make sure I fully understand.

[quiquelhappy]

I created an example repo here: https://github.com/quiquelhappy/handlebars-layouts-issue

You should be able to test it with npm run dev.

I've also included an expected.html file with a note on top explaining the desired output and the reasoning behind it.

You can also test WorkingLayout.hbs by changing const working = false to true on index.js