Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
quiquelhappy opened this issue Jul 28, 2022 · 2 comments
Open

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

quiquelhappy opened this issue Jul 28, 2022 · 2 comments

Comments

@quiquelhappy
Copy link

quiquelhappy commented Jul 28, 2022

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
Copy link
Owner

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants